Using XHTML to Create Forms

The purpose of forms tags is to provide the means for a user to enter information. This is useful for several reasons such as:

  1. To facilitate searches of databases such as in RefWorks.
  2. To allow you to monitor user behaviour.
  3. To implement surveys.
  4. To implement e-commerce, for example, EBay.

It is not within the scope of this class to teach you the scripting that lays behind the processing of the forms. What you will do in this seminar is to become familiar with the tags that are used to implement various features of a form such as radiobuttons and textboxes.

The following table is a brief summary of the commands described in your Valqui XHTML text. Refer to that textbook for a complete description and examples. This table is provided as a fast reference for you.

Code Description 
<form>
      <input />
</form>
 This is the general format of the form tag. Input tags occur between the form tags. 
<form action=myFormAction.asp>
On submitting the form, the browser tries to run myFormAction.asp an Active Server Page (asp), which can process the input from the user. 
<input type=submit name=buttonName
       value="button-label" />
This creates a Submit Button with the label specified in the value attribute. If the value attribute is not specified, the label "Submit Query" is used. 
<input type=reset value="button-label" />
This creates a Reset button with the label specified in the value attribue. If the value attribute is not specified, the label "Reset" is used. When this button is clicked, the form is returned to its original state. 
<input type=text name=myTextField
       value=your name here size=15 maxlength=30 />
 This creates a Text Input Box. This is useful for getting one line of alphanumeric text (letters and numbers) from the user. If the value attribute is not specified, the field is blank. 
<input type=password name=myTextField />
This creates a Password Input Box. The characters that the user types are displayed as asterisks or bullets. This is useful for hiding input from others who may be watching. 
<textarea cols=60 rows=5> 
       The initial text for a textarea goes into the
       textarea element. If no words are specified, the box is blank.
</textarea>
 This creates a Text Area Box, which is a multi-line text box. A text area is useful, for instance, in providing an area for users to type comments.
Yes No Maybe 
<input type=radio name=choice value=Y 
       checked=checked />Yes
<input type=radio name=choice value=N />No
<input type=radio name=choice value=M />Maybe
 This creates three Radio Buttons labelled Yes, No, and Maybe. Radio buttons are used when you want the user to select only one from several options. Note: Each radio group should have a different name.
Yes No Maybe 
<input type=checkbox name=choice value=Y 
       checked=checked />Yes
<input type=checkbox name=choice value=N /> No
<input type=checkbox name=choice value=M /> Maybe
 This creates three Check Boxes labelled Yes, No, and Maybe. Check boxes are used when you want the user to select none or more than one of several options. 
<select name=choice> 
   <option value=Y selected=selected>Yes</option>
   <option value=N>No</option>
   <option value=M>Maybe</option>
</select>
 This creates a Single Selection Box also called a Drop-Down-List Box which allows the user to select one from many options. 
<select name=choice size=3 multiple=multiple> ......  </select>
 This creates a Multiple Selection Box which allows the user to select multiple options by holding down the Shift or Ctrl key. 
<input type=text name=name size=20 
       maxlength=30 tabindex=1 />
This enables users to tab through the form fields. The tabindex= value determines the order to tab through the text boxes and other fields. Note: to skip a field when tabbing, use negative values starting at -1.

Click here for an exercise using Forms tags.