Forms

The 'form' concept gives the user the ability to send information back to the Web server. The document may contain a questionnaire, for example, which the user fills in and returns. A Form element encloses the entire form. It may contain all the normal elements described above (including the particularly useful table-building elements described above), plus the form-building elements described in this section. However, it must not contain an embedded Form element.

Sending a form

The Form element has a required attribute called Action, which identifies (using a URL) a script that can process the form when it is submitted, and an Encoding Type (Enctype) attribute that specifies the MIME type used to submit data to the server (the default value is 'application/x-www-form-urlencoded').

The Form element may contain a number of Input elements, of various kinds discussed below, but one of them must have an attribute Type value of 'submit' (the default value is 'text'), which the browser detects and takes as an instruction to send the content of the form to the Web server (another Input element may be used to define a button that resets the default settings of the form, using a Type attribute value of 'reset').

The example below sends the data entered into the form to the 'myscript.cgi' script running on the Web server when the 'Send' button is selected by the user of the browser:

<form method="POST" action="../mydir/myscript.cgi">
   <input type="submit" value="Send" />
   ...
</form>

Note that the Form element has an attribute called Method, which in the example has a value of 'post'. It may also take a value of 'get' (this is the default value). These values define the exact scheme by which the form sends information back to the server, a subject which is not covered further here.

Radio buttons

An Input Type value of 'radio' indicates that a radio button will appear in the form. The browser ensures that only the last radio button selected is highlighted at any one time within a group of buttons, and all Input elements sharing the same Name value are part of a single group. Each item specifies a Value. In the example below, two groups are defined, 'vehicle' and 'colour'. From the vehicle group the user may select the radio button labelled 'car', 'truck' or 'van', and from the colour group the user may select 'Red' or 'Blue'. The user may therefore select, for example, a blue car or a red van:

<input type="radio" name="vehicle" value="car" />
<input type="radio" name="vehicle" value="truck" />
<input type="radio" name="vehicle" value="van" />
<input type="radio" name="colour" value="Red" />
<input type="radio" name="colour" value="Blue" />

However, the user will not be able to see which buttons to select unless descriptive names also appear near the Input element, perhaps within Paragraph elements:

<p>
  <input type="radio" name="colour" value="red" />
  Red option.
</p>
<p>
  <input type="radio" name="colour" value="blue" />
  Blue option.
</p>

The browser is likely to pre-select the first item in each group when the form is displayed, because one option must always be selected, but it is the value selected when the 'submit' button is pressed that ultimately matters.

Check-boxes

The Input element can also be used to provide 'check-boxes,' which differ from radio buttons in that more than one can be selected at any one time. The Type attribute contains 'checkbox' and the Name attribute contains the name of the item that may be selected. An item can be pre-selected by including the Checked attribute, holding the single legal value of 'checked'.

In the example below, the user is presented with two options, 'leather' (seats) and 'CD' (player), and the CD item is already selected. The user can deselect CD player, select leather seats, select both or neither:

<p>
  <input type="checkbox" name="car" value="leather" />
  Leather
</p>
<p>
  <input type="checkbox" name="car" value="CD"
         checked="checked" />
  CD-player
</p>

Text boxes

The Input element can be used to create text entry areas. The Type attribute either holds a value of 'text' or is absent (as this is its default value). The Name attribute holds the label for the text field. The Size attribute may be used to determine the length (in characters) of the text field, and if not present defaults to 20 characters. Also, the attribute Maxlength can be used to strictly limit the number of characters that can be entered, and may be smaller or larger than the text field size:

<input type="text" size="25" maxlength="15" />

For multiple lines of text, the Textarea element is used instead. Each text area is identified using the Name attribute. The required Rows and Columns (Cols) attributes set the height and width of the visible text area in character-sized units. Scroll bars or other devices may allow extra characters or lines of text to be displayed within this area:

<textarea name="mybox" rows="3" cols="10">Here
is some content</textarea>

All line-feed characters in the data are retained, including one between the start-tag and the first word, if present (the example above would begin with a blank line if there were a line-feed before 'Here').

Other input types

Other Input element options available using the Type attribute include 'file' (attach a file to send with the form), 'hidden' (do not show to the user, used for passing state information between the server and browser) and 'image' (presents a graphic, though the Src attribute can also be used to locate an image file that will fill the background of the input field).

The 'reset' type identifies a button that tells the browser to ignore all changes made to the form since it was loaded.

The 'password' type identifies a text entry field in which the text entered is not visible, but often replaced by a stand-in character, such as '*'.

Selection menus

Selection menus may be created. The Select element encloses the menu. It uses the Name attribute to identify the menu. The number of rows visible is determined by the Size attribute.

By default, it is possible to select only one item from the list; each time a selection is made, the previous selection is lost. But the presence of the Multiple attribute (which can only take a single value of 'multiple') signifies that it is possible to select several options. Deselection then typically requires the user to reselect an already selected item.

Each option in the menu is defined using the Option element. The Value attribute may be used to replace the content of the element as the value returned to the server if that item is selected, and the Selected attribute may be used to pre-select one of the items, by including its only possible value of 'selected':

<select name="mymenu">
  <option>Car</option>
  <option selected="selected">Truck</option>
  <option>Van</option>
</select>

The later discussion on event triggers includes some form-specific features.

Field sets

Groups of form elements can be given a distinct identity, and perhaps have a line drawn around them, using the Fieldset element. This element may also contain a Legend element, to give the group a name, and to allow easy access to the group, because it contains the Accesskey attribute (this is explained below). Although the DTD does not contain this constraint (due to the possibility that text may occur directly inside the Fieldset element), there is a formal rule that only one Legend element can occur within the Fieldset element, and that it must precede all text or elements (it can only be preceded by whitespace characters).

Selection interface

Text that describes the purpose of an object on the form can be made 'active'. Using the Label element, the user can select the text instead of the actual button. For check-boxes and option buttons, selecting a label changes the value just as selecting the object itself does:

<label><input type="checkbox" ... />Leather</label>

If it is not convenient for the Label element to enclose the button or field it relates to, then it can use the For attribute instead, to refer to the Id attribute of the given object:

<label for="covertype">Leather</label>
...
<input type="checkbox" id="covertype" ... />

It is possible to use the tab key to select form objects in a pre-defined order using the Tabindex attribute. The form control with a Tabindex value of '1' is the first field selected. Alternatively, the Accesskey attribute allows a specific field to be selected instantly when the user depresses a specified key (in combination with the ALT key on a PC). It can be used with the Input, Select, Textarea, Button and Label elements (and also with image maps in the Area element):

<input type="checkbox" accesskey="L" .../> Leather

A number of items can be disabled in a form, to show that they are not applicable in the current circumstance. This may be done by 'greying out' the items, so that they are obviously not selectable. The Input, Select, Option Group, Option, Textarea and Button elements can all take the Disabled attribute, which if present must have the value 'disabled'. Similarly, the text items represented by the Textarea element and the Input element (when set to type 'text') may be enabled but not editable, becoming 'read-only' objects. The user can still select a range of text in the field, and copy this range elsewhere, but cannot change the content of the field itself. When present, the Readonly element has a single possible value of 'readonly'.