Forms. The Basics.

An HTML FORM is a section of a document containing normal content, markup, special elements called controls, and labels on those controls. Forms are often used to allow your page user to communicate with you. Forms consist of the visible parts in the page, such as fields, labels and buttons, and the processing scripts and values that process and organize the information your user submits. Form data can be handled with CGI (Common Gateway Interface) or some other custom script or can be e-mailed by a mail server. This page presents sample forms that use e-mail to submit data. JavaScripting can be used in combination with forms, and can serve some of the same functions as CGI scripts. One common use of both JavaScripting and CGI scripts is form validation, assuring that fields are properly filled before they are sent.

CGI Script Basics.

A CGI script is a program or set of commands on a Web server that handles data from a Web page. CGI scripts are used to maintain and publish online databases, maintain page access information, create server-side image maps, create guestbooks, maintain message boards and discussion groups, respond to inputs from page users, and much, much more. CGI scripts are often written in Perl, but can be written in a variety of computer languages, including AppleScript, ASP, C/C++, Visual Basic and others. The language used will depend on the server's capabilities. CGI scripts are actually programs that run on the server. For server-side scripts the Web page form needs to contains the URL of the script. Often CGI scripts are available from the hosting service. Many are available online.

Form Basics.

Forms consist of two parts, the visible aspect, fields, labels and buttons, and the invisible aspects, the processing script, field names and invisible fields. Users interact with forms through the visible elements, called controls or input items. These include text fields, text areas, check boxes, radio buttons, menus, images and buttons. Users modify the input by entering text, selecting menu items, changing settings, and clicking buttons or images before submitting the form. It is essential to label the input items in forms so the users know how to utilize them.

Additionally, in the page source, names and values are required for form fields so you or the server can equate user responses with the appropriate controls. A control's name is applied using a name attribute, consisting of a character string. The name is the label you apply in the code, and can be distinct from the visible label in the page. The value is the user response, such as selecting a menu item or a radio button, or filling a text field. The value is created by the page author for controls like radio buttons and checkboxes, and supplied by the page user for text fields. On submit the name-value pairs are sent to the server or e-mailed.

The elements used to create controls or input items usually appear inside the <FORM> </FORM> tags, but may also appear outside of a FORM element. The <FORM> element acts as a container for controls and specifies the layout of the form. The <FORM> element also specifies any program that will handle the completed and submitted form, the method by which user data will be sent to the server, and any character encoding that must be accepted by the server in order to handle the form. Forms may specify the value of the accept-charset attribute and/or restrict unrecognized characters.

The <FORM> and </FORM> tags create the form. The FORM element requires both a start tag and a closing tag. The <INPUT> element is used to create the controls and input areas. Buttons or images are used to create the actions. Here follows an example of a simple form illustrating the basic elements. Other form examples with their source code are found later in this page. (Note: Source in this page altered to disable spammer abuse. Form will not actually mail.)

 <form method="post" action="mailto:joseph314@ispcentral.net" enctype="text/plain">

   Send e-mail to: 

     <input type="text" name="e-mail" size="40">

     <input type="submit" value="Submit Button">

 </form>

Form Attributes.

Form elements and some of their attributes are organized in the list below, with explanations. The attributes modify the form tag:

• action = url, specifies a form processing agent or a e-mail address.
• method = get | post, specifies which HTTP method will be used to submit the form, where "get" is the default.
  • get, the form data set is appended to the URL specified by the action attribute and sent. This method should be used when the form causes no side-effects. It also restricts form data set values to ASCII characters.
  • post, the form data set is included in the body of the form and sent. This method is used if the service associated with the processing of a form causes side effects, such as modifing a database. With enctype="multipart/form-data" this method covers the entire ISO10646 (UNICODE) character set.
• enctype = content-type, specifies the content type used to submit the form to the server when the value is "post." This is a MIME type, such as enctype="text/plain". If you do not specify a mime type a default is assumed.
• accept-charset = charset list, specifies the list of character encodings for input data.
• accept = content-type-list, specifies a comma-separated list of content types that a server processing this form will handle correctly.
• name = a sequence of characters from the document character set , names the element so that it may be referred to from style sheets or scripts.
• target = name, where the name is the frame that receives the output of a CGI action from the server.

Form Controls and Input Areas.

The control type defined by the <INPUT> element depends on the value of its type attribute:

• text, creates a single-line text input control.
• password, the input text is rendered as asterisks, and hides it from casual observers. Nonetheless it is transmitted to the server as text, and may be read by anyone with network access.
• checkbox, creates a checkbox.
• radio, creates a radio button.
• submit, creates a submit button.
• image, inserts a graphical submit button, as specified by the value of the src attribute. Alternate text can be specified with the alt attribute.
• reset, creates a reset button.
• button, creates a push button with the value attribute as the button's label.
• hidden, creates a hidden control.
• file, creates a file select control with the value attribute as the initial file name.

<Input> type attributes require a name for all but submit and reset. The <input> element requires a start tag and the end tag is forbidden.

The <input> element attribute definitions include:

• type = text | password | checkbox | radio | submit | reset | file | hidden | image | button, specifies the type of control, with a default value of "text".
• name = a sequence of characters from the document character set , assigns the control name.
• value = a sequence of characters from the document character set , specifies the initial value of the control and is optional except for values "radio" or "checkbox".
• size = numbers specifying the initial width of the control in pixels, except for the values "text" or "password", where the integer specifies the number of characters.
• maxlength = numbers from the document character set , for the values "text" or "password" specifies the maximum number of characters the user may enter. The default value is an unlimited number.
• src = url, specifies the location of the image to be used as the submit button.

The <button> element requires a start tag and an end tag.

The TEXTAREA element requires start and end tags, as well as rows and cols attributes. The TEXTAREA element attribute definitions include:

• name = a sequence of characters from the document character set, assigns the control name.
• rows = number, specifies the number of visible text lines.
• cols = number, specifies the text area width in character width.
• wrap, specifies that lines are automatically wrapped to the textarea margins.

Here follows further explanation of the input types.

Buttons. There are three types of buttons: submit buttons act to submit forms, reset buttons act to reset all controls to their initial values, and push buttons. Push buttons may trigger scripts. Authors should specify the scripting language of a push button script with the META element. Authors create buttons with the BUTTON element or the INPUT element. Images can be used as buttons.

Checkboxes and Radio Buttons. These on/off switches are "on" when the control element's checked attribute is set and become successful when a form is submitted. The INPUT element is used to create a checkbox control and radio buttons. Radio buttons that share the same control name are mutually exclusive: when one is switched "on", all others are switched "off".

Menus offer users options from which to choose. The SELECT element creates a menu, in combination with the OPTGROUP and OPTION elements.

Text Input. Two controls allow users to input text. The INPUT element creates a single-line input control and the TEXTAREA element creates a multi-line input control.

File select is created by the INPUT element and allows the user to select files so that their contents may be submitted with a form.

Hidden controls create controls submitted with the form that are not visible to the form user. This control type is useful for storing information between client/server exchanges. It is created by the INPUT element

Object controls, created with the OBJECT element, insert generic objects in forms that submit associated values with other controls.

JavaScripts and Forms

In this code sample a button labeled "Click Me" has a JavaScript function named "verify" triggered by the "onclick" event. The INPUT type is button, and the button will bear the script label, "Click Me". The default submit action will follow the JavaScript verification. Verification is often employed to ascertain if forms are correctly filled out, and JavaScript allows this action to take place on the client side.

<INPUT type="button" value="Click Me" onclick="verify()">

The following example is a Jump Menu created using Dreamweaver 3.0. It provides links to a variety of off-site Internet resources related to forms. It functions without a button, using a JavaScript to accomplish the jump to a new URL. Note that the first option does not have a URL and is "selected" to display in the menu window. The code follows the form.

The following JavaScript was created by Dreamweaver and was automatically placed in the HEAD section of the HTML page.

<script language="JavaScript"> 

<!-- 
function MM_jumpMenu(targ,selObj,restore){ //v3.0 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");      

  if (restore) selObj.selectedIndex=0; 

} 

//--> 

</script>

The following source code creates the jump menu in the BODY of the page:

<form method="post" action=""> 

 <select name="Form Links" onChange="MM_jumpMenu('parent',this,0)"> 

  <option value="" selected> Links to Forms Pages </option>

  <option value="http://www.javaworld.com/javaworld/jw-06-1996/jw-06-javascript.html">
JavaScript and Forms </option>

  <option value="http://www.mcli.dist.maricopa.edu/tut/tut28c.html">Form Action by 
JavaScript </option>

  <option value="http://www.javascriptcity.com/scripts/index.html">Free 
JavaScripts </option>

  <option value="http://www.flex1.com/js/">Speed JavaScript Resources </option>

  <option value="http://www.crays.com/js4u/?tkachenko@earthlink.net">Javascripts 4 
U WebRing </option>

  <option value="http://www.w3.org/TR/html401/interact/forms.html">HTML 4.01 
Forms </option>

  <option value="http://www.pagetutor.com/pagetutor/forms/" selected>Form 
Tutor </option>

 </select> 

</form> 

An alternate JavaScript to handle a Jump Menu follows. Place the JavaScript in the HEAD section. In this example a SUBMIT button is used. Notice that onChange in the select tag and the function in the JavaScript have the same name "jumpPage." Use this link to see a page with only this form as contents.

Here is the JavaScript for the <head> section:

<script language=JAVASCRIPT type="TEXT/JAVASCRIPT"> < !-- hide

function jumpPage(newLoc) { 

     newPage = newLoc.options[newLoc.selectedIndex].value 

     if (newPage != "") { 

     window.location.href = newPage

     }

     } 

     <// end hiding -->

     < /script> 

Here is the code from the form in the <body> section:

<form action="" method=GET>

        <select name="newLocation" onChange="jumpPage(this.form.newLocation)">

          <option value="jump_menu.html" selected>Jump Menu</option>

          <option value="frames/creating_frames.html">Frames Page</option>

          <option value="frames/frame_tags.html">Frames Tags</option>

          <option value="feedback.html">Forms Feedback</option>

          <option value="index.html">jqjacobs.net/web</option>

          <option value="../index.html">jqjacobs.net</option>

          <option value="http://www.ase.edu/">ASU</option>

        </select>

        <input type=SUBMIT value="Go there now!" name="SUBMIT">

  </form> 

Sample Forms.

The next example is a feedback form using two text elements, a textarea element and two buttons (submit and reset). Notice that the button values are not default values. The cols and rows attributes size the textarea element. If you see any typos in this or other pages in this site you can let me know with this form. (Note: Source in this page altered to disable spammer abuse. Form will not actually mail.)

The following source code created the form. This form is handled by HTML and does not require a script.

<form action="mailto:name@domain.suffix" enctype="text/plain" method=POST>

  Your Name: 

   <input type="text" name="name" size="40"><br>

  Your E-mail: 

   <input type="text" name="e-mail" size="40"><br>

  < textarea cols="60" rows="5" name="comment" wrap> <br>

  <input type="submit" value="Send E-mail">

  <input type="reset" value="Start Over"> 

</form>

In the following example two radio buttons are used to allow input of the user's browser type.

The page source follows:

<form method="post" action="...." name="....">

   Your browser:

     <input type="radio" name="radioset" value="N" checked> Netscape Navigator      

     <input type="radio" name="radioset" value="E"> Internet Explorer 

</form>

In the following example a select menu is used to allow input of the user's browser type.

The page source follows:

<form method="post" action="...."> Your browser: 

   <select name="select"> 

     <option value="N4.7" selected> Netscape Navigator 4.7 </option> 

     <option value="E5.0"> Internet Explorer 5.0/ <option>

     <option value="N4.0"> Netscape Navigator 4.0/ <option> 

     <option value="E4.0"> Internet Explorer 4.0/ <option> 

     <option value="N3.5"> Netscape Navigator 3.5/ <option> 

   </select>
</form>

This example features three check boxes. Unlike radio buttons, checkboxes allow users to choose more than one selection. This form also has a hidden field. The field has a value indicating the source of the submission.

The page source follows:

 <form method="post" action="...."> 

   <p> Browsers you use:<br> 

     <input type="checkbox" name="Navigator" value="N"> Netscape Navigator

     <input type="checkbox" name="Explorer" value="E"> Internet Explorer

     <input type="checkbox" name="other" value="O"> Other

     <input type="hidden" name="page" value="Input from web/forms.html.">

   </p> 

 </form>

To combine the various form types into a single form use only one set of form tags enclosing all the form elements your case requires. See the Feedback Form Page for an example of multiple form elements combined into one form. Remember, test your form before publishing it.

Useful Links.

For more information consult the current HTML specification Forms Page.

See also the Dreamweaver Tutorial, Forms section, to understand creating forms using Dreamweaver.

Elizabeth Castro's Scripts.