XHTML 1.0 Element Reference

Form Elements

XHTML forms are a Web surfer's gateway to interactive content. Forms collect information from a user, and then a script or program on a Web server uses the information to compose a custom response to the form submission.

For all the form controls that are available to you as a document author, you need to know surprisingly few XHTML elements to produce them. These elements, together with some new features introduced in the HTML 4.0 recommendation that improve form accessibility for the disabled, are covered in this section.

<form>

Type:

Container

Function:

Contains the text and elements that compose an XHTML form (see Figure 3.17).

Figure 3.17 XHTML forms gather user input and send that information to a server for processing.

Syntax:

<form action="URL_of_processing_script" method="get|post"
 target="frame_name" enctype="MIME_type_of_file_to_upload"
 accept-charset="acceptable_character_sets"
 accept="acceptable_MIME_types">
...
</form>

The <form> element and its attributes are sometimes referred to as the form header.

Attributes:

The <form> element takes the following attributes:

• accept—Specifies a list of acceptable content types (MIME types) that a server processing the form can handle correctly.

• accept-charset—Set equal to a list of character sets that the form's processing script can handle.

• action—Set equal to the URL of the script or program that will process the form data. action is a required attribute of the <form> element.

• enctype—Set equal to "multipart/form-data" when you're expecting a file upload as part of the form data submission and is set equal to the expected MIME type of the file. Otherwise the default value of "application/x-www-form-urlencoded" is sufficient.

• method—Refers to the HTTP method used to send the form data to the server. The default method is get, which appends the data to the end of the processing script URL. If you set method="post", the form data will be sent to the server in a separate HTTP transaction.

• target—Enables you to target the response from the processing script or program to a specific frame.

Example:

<form action="shopping_cart.cfm" method="post" target="response">
...
</form>

Related Elements:

The following elements are valid only when within a <form> element: <input />, <select>, <option>, <optgroup>, <textarea>, <button>, <label>, <fieldset>, and <legend>. Each of these elements is described in this section.

<input />

Type:

Standalone

Function:

Places one of the following form controls:

• Text, password, or hidden fields

• Check boxes

• Radio buttons

• File-upload fields

• Image-based buttons

• Scripted buttons

• Submit and reset buttons

Syntax:

<!-- Text and password fields -->
<input type="text|password" name="field_name" value="default_value"
 size="field_size" maxlength="maximum_input_length"
 disabled="disabled" readonly="readonly" />

or

<!-- hidden field -->
<input type="hidden" name="field_name" value="field_value" />

or

<!-- checkbox -->
<input type="checkbox" name="field_name" value="field_value" checked="checked" disabled="disabled" />

or

<!-- radio button -->
<input type="radio" name="field_name" value="field_value"
 checked="checked" disabled="disabled" />

or

<!-- file upload -->
<input type="file" name="field_name" value="default_value"
 accept="acceptable_mime_types" disabled="disabled" />

or

<!-- image-based button -->
<input type="image" name="image_name" src="URL_of_image_file"
alt="text_description" align="top|middle|bottom|left|right" usemap="map_name" disabled="disabled" />

or

<!-- scripted button -->
<input type="button" name="button_name" value="button_label"
onclick="script_name" disabled="disabled"/>

or

<!-- submit/reset button -->
<input type="submit|reset" name="button_name" value="button_label"
disabled="disabled"/>

Attributes:

The <input /> element is easily the most versatile of all the XHTML elements. It has a large number of attributes, although not all are applicable in every situation. The following list examines each variant of the <input /> element (which corresponds to changing values of the type attribute) and notes what each applicable attribute does in that situation. Note that the name attribute is required for all the variations of the <input /> element.

• Text and password fields (type="text|password")—The name attribute gives the input field a unique name so it can be identified by the processing script. The value attribute is appropriate for a text field when you want to pre-populate the field with a default value. length is set equal to the number of characters wide the input field should be onscreen. maxlength sets an upper limit on how many characters long the input from the field can be. The disabled attribute deactivates the field, and readonly leaves the field active while disallowing the user from typing any new input into it.

• Hidden fields (type="hidden")—name and value specify the name of the field and the value to pass to the server.

• Check box (type="checkbox")—name gives the check box field a unique name, and value is set equal to the value you want passed to the server if the box is checked. Including checked makes the box preselected, and disabled disables the check box altogether.

• Radio buttons (type="radio")—name gives a name to the entire set of radio buttons. All buttons can have the same name because their corresponding values have to be mutually exclusive options. The checked attribute preselects a radio button and disabled shuts down the radio button.

• File upload (type="file")—name gives the field a unique name, and value is set to the default value of the field (presumably a filename). The accept attribute provides a set of acceptable MIME types for upload. Specifying the disabled attribute deactivates the field.

• Image-based button (type="image")—The SRC attribute tells the browser where it can find the image file for the button. alt provides a text-based alternative to the image, should the image file not be available. You can use align to control how the image is aligned on the page. usemap is set equal to a client-side image map name, enabling you to take different actions depending on where the user clicks. Using the disabled attribute shuts off the button.

• Scripted button (type="button")—Whatever you specify for the value attribute will be the text that appears on the face of the button. The onclick event handler is set equal to the script code or the name of the script that is to execute when the button is clicked. If you specify the disabled attribute, the scripted button will be deactivated.

• Submit and reset buttons (type="submit|reset")—The value attribute specifies what text to place on the button. If disabled, the submit or reset button will be turned off.

Additionally, you can use the following attributes with the <input /> element:

• accesskey—Defines a shortcut key combination that the user can press to give focus to the input field (see the attribute listing for the <a> element for more details).

• tabindex—Defines the input field's position in the tabbing order of the page.

Example:

<form action="/cgi-bin/submit_it.pl">
Login Name: <input type="text" name="login" size="12" />
Password: <input type="password" name="passwd" size="12" />
<input type="hidden" name="browser" value="ie4" />
Sex: <input type="radio" name="sex" value="f" />Female
   <input type="radio" name="sex" value="m" />Male
<input type="button" value="Check Data" onclick="validate()" />
<input type="submit" value="Login" />
<input type="reset" value="Clear" />
</form>

<select>

Type:

Container

Function:

Sets up a list of choices from which a user can select one or many.

Syntax:

<select name="field_name" size="visible_rows" multiple="multiple"
 disabled="disabled" tabindex="tab_position">
...
</select>

Attributes:

You can use the following attributes with the <select> element:

• disabled—Deactivates the field.

• multiple—Enables the user to choose more than one of the options by holding down the Ctrl key and clicking.

• name—Gives the field a unique name so it can be identified by the processing script.

• size—Set equal to the number of options that should be visible on the screen.

• tabindex—Defines the select field's position in the tabbing order of the page.

Example:

<p>Please select a size:</p>
<select name="size" size="4">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-Large</option>
...
</select>

Related Elements:

Individual options in the list are specified using the <option> element. You can also use the <optgroup> element to place options into logical groups.

<option>

Type:

Container

Function:

Defines an option in a <select> field listing.

Syntax:

<option value="option_value" selected="selected"
 disabled="disabled" label="label_text">
... option text ...
</option>

Attributes:

The <option> element takes the following attributes:

• disabled—Makes the option unavailable.

• label—Provides a short label for the menu option. If specified, this label is used in place of the option text itself.

• selected—Preselects an option.

• value—Specifies a value to pass to the browser if the option is selected. If no value is given, the browser passes the option text to the server for processing.

Example:

<select name="state" size="5">
<option value="AL">Alabama</option>
<option value="NM" selected>New Mexico</option>
<option value="OK">Oklahoma</option>
...
</select>

Related Elements:

The <option> element is valid only within a <select> element. You can place options into logical groups by using the <optgroup> element.

<optgroup>

Type:

Container

Function:

Defines a logical group of select list options. Though it's not supported on browsers currently, it is expected that logically grouped options will be rendered in a special way—most likely by means of a cascading set of choices, similar to what you see with browser bookmarks.

Syntax:

<optgroup label="label_text" disabled>
<option> ... </option>
<option> ... </option>
<option> ... </option>
...
</optgroup>

Attributes:

<optgroup> can take two attributes:

• disabled—Disables the options in the group.

• label—Specifies a label for the option group. label is a required attribute of the <optgroup> element.

Example:

<optgroup label="firstquarter">
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
</optgroup>
...
</option>

Related Elements:

The <optgroup> element should be used only inside a <select> element. The only element allowable inside an <optgroup> element is the <option> element.

<textarea>

Type:

Container

Function:

Sets up a multiple-line text input window.

Syntax:

<textarea name="field_name" rows="number_of_rows"
 cols="number_of_columns" disabled="disabled" readonly="readonly"
 accesskey="shortcut_key_letter" tabindex="tab_position">
... default text to appear in window ...
</textarea>

Attributes:

The <textarea> element can take the following attributes:

• accesskey—Defines a shortcut key combination that the user can press to give focus to the text input window (see the attribute listing for the <a> element for more details).

• cols—Set equal to the number of columns wide the text window should be. cols is a required attribute of the <textarea> element.

• disabled—Deactivates the text window.

• name—Assigns a unique name to the input window so that the processing program can identify it.

• readonly—Leaves the window active, but the user will not be able to change the default text that is displayed.

• rows—Set equal to the number of rows high the text window should be. rows is a required attribute of the <textarea> element.

• tabindex—Defines the text window's position in the tabbing order of the page.

Example:

<textarea name="feedback" rows="10" cols="40">
We appreciate your comments! Please delete this
text and type in your feedback.
</textarea>

<button>

Type:

Container

Function:

Places a button on the form. This type of button is different from the one rendered by <input /> because it has improved presentation features, such as three-dimensional rendering and up/down movement when clicked.

Syntax:

<button type="submit|reset|button" name="button_name" value="button_value"
 disabled="disabled" accesskey="shortcut_key_letter" tabindex="tab_position">
... text for button face or <img/> element ...
</button>

If text is placed within a <button> element, that text appears on the face of the button. If an <img /> element is placed within a <button>, the image is used as the button.

Attributes:

You can use the following attributes with the <button> element:

• accesskey—Defines a shortcut key combination that the user can press to click the button (see the attribute listing for the <a> element for more details).

• disabled—Disables the button.

• name—Gives the button a unique name.

• tabindex—Defines the button's position in the tabbing order of the page.

• type—Set to submit, reset, or button, depending on the type of button you're defining. type="button" is typically used for defining a scripted button.

• value—Specifies what is passed to the server when the button is clicked.

Example:

<button name="validate" value="form_validation" onclick="validate();">
Click here to validate your input.
</button>

<label>

Type:

Container

Function:

Denotes a form field label. Labels are typically text next to the field that prompts the user for the type of input expected. This works fine for text-based browsers, but it makes forms inaccessible for users who are visually impaired and who use speech-based or Braille browsers. Marking field labels with the <label> element makes it possible to prompt these users for the necessary input.

Syntax:

<LABEL FOR="field_ID" ACCESSKEY="shortcut_key_letter">
... label text goes here ...
</LABEL>

Attributes:

The <label> element takes the following attributes:

• accesskey—Defines a shortcut key combination that the user can press to give focus to the label (see the attribute listing for the <a> element for more details).

• for—Set equal to the value of the id attribute for the field that goes with the label.

Example:

<label for="pw" accesskey="p">enter your password:</label>
<input type="password" id="pw" name="passwd" />

Related Elements:

<label> is typically used with the <input />, <select>, or <textarea> elements.

<fieldset>

Type:

Container

Function:

Groups related form input fields. This is expected to be helpful for browsers used by differently abled Web users. For example, a speech synthesis browser might speak the prompting text from each of the fields in a logical group with the same voice.

Syntax:

<fieldset>
... related input fields ...
</fieldset>

Attributes:

None.

Example:

<fieldset>
Login: <input type="text" name="login"/>
Password: <input type="password" name="passwd"/>
</fieldset>

Related Elements:

The <legend> element can be used to give a field grouping a specific name.

<legend>

Type:

Container

Function:

Names a group of related form fields. Coupled with the <fieldset> element above, <legend> further enhances accessibility for differently-abled users.

Syntax:

<legend accesskey="shortcut_key_letter">
... legend text goes here ...
</legend>

Attributes:

The <legend> element takes the accesskey attribute, which defines a shortcut key combination that the user can press to give focus to the legend (see the attribute listing for the <a> element for more details).

Example:

<fieldset>
<legend>User Login Information</legend>
Login: <input type="text" name="login"/>
Password: <input type="password" name="passwd"/>
</fieldset>

Related Elements:

<legend> gives a name to a set of fields grouped together by the <fieldset> element.