Section 15.2. Form Controls | Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))

15.2. Form Controls

A variety of form control elements (also sometimes called "widgets ") are used for gathering information from a form. This section looks at each control and its specific attributes. Every form control (except submit and reset) requires that you give it a name (using the name attribute) so the form-processing application can sort the information. For easier processing of form data on the server, the value of name should not have any character spaces (use underscores or periods instead).

The name attribute works like a variable name. The value provided for name becomes the variable's name. The content entered by the user into the form control is then assigned to the variable. Of all the attributes, the name attribute is key in passing data from the HTML form to any other place in the page, another page, or out through middleware to a database.

15.2.1. Input Controls

The input element is used to create a variety of form input controls , including:

Single-line text entry fields
Password entry fields
Hidden controls
Checkboxes
Radio buttons
Submit and reset buttons
File upload mechanisms
Custom and image buttons

The type attribute in the input element specifies the control type. The value of the type attribute also determines which other attributes may be used with the element. The input element and all of its accepted attributes appears here. Control-specific attribute listings appear along with the discussion of each control type.

input

     <input />

Attributes

Core (id, class, style, title), Internationalization, Events, onfocus, onblur, onselect, onchange

alt="text"

accept="MIME type"

accesskey="character"

checked="checked"

disabled="disabled"

maxlength="number"

name="text" (Required by all input types except submit and reset)

readonly="readonly"

size="number"

src="URL"

tabindex="number"

value="text"

15.2.1.1. Text entry field

The simplest type of form element is the text entry field (type="text"). Text is the default setting for the input element.

input type="text"

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

maxlength=number

name="text" (Required)

readonly="readonly"

size="number"

value="text"

This field allows the user to enter a single word or a line of text. By default, the browser displays a text-entry box that is 20 characters wide, but you can set it to be any length using the size attribute.

By default, the user can type an unlimited number of characters into the field (the display scrolls to the right if the text exceeds the width of the supplied box), but you can set a maximum number of characters using the maxlength attribute.

Use the value attribute to specify the initial value, that is, the text to appear when the form is loaded. The user can change this default text. If you have a form that consists of only one text input element , pressing the Enter key submits the form without requiring a specific Submit button in the form. The following markup creates a text field with a size of 15 characters, a maximum length of 50 characters, and the text "enter your name" displayed in the field (Figure 15-2).

     <p>What is your name?</p>     <input type="text" name="name" size="15" maxlength="50" value="enter your name" />

Figure 15-2. Text entry input control

15.2.1.2. Password text entry

A password field (type="password") works just like text entry, except the characters are obscured from view using asterisk (*) or bullet (•) characters (or another character determined by the user agent).

input type="password"

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

maxlength="number"

name="text" (Required)

readonly="readonly"

size="number"

value="text" (Required)

The attributes and syntax for password entry fields are the same as for the text input type. The only difference is that values (such as the one provided as an initial value in this markup) are replaced with neutral characters, as shown in Figure 15-3.

     <p>What is your password?</p>     <input type="password" name="password" size="8" maxlength="8" value="abcdefg" />

Figure 15-3. Password input control

Although the characters entered into the password field are not visible to casual onlookers, the form does not encrypt the information entered and should not be considered to be a real security measure.

15.2.1.3. Hidden entry (type="hidden")

The hidden input (type="hidden") adds a control that isn't displayed in the browser, but is supplied to the form processor when the form is submitted.

input type="hidden"

Attributes

accesskey="character"

tabindex="number"

name="text" (Required)

value="text" (Required)

Hidden controls are useful for sending information to be processed along with the user-entered data, such as labels used by the script to sort forms. Users cannot see or alter hidden controls. Some scripts require specific hidden fields be added to the form in order to function properly. Here is a hidden element (Figure 15-4):

     <p>This is a hidden element</p>     <input type="hidden" name="extra_info" value="important" />

Figure 15-4. Hidden input

15.2.1.4. Checkbox (type="checkbox")

Checkboxes (type="checkbox") are like on/off switches that can be toggled by the user. Several checkboxes in a group may be selected at one time, which makes them useful for multiple-choice questions where more than one answer is acceptable. When a form is submitted, only the "on" checkboxes submit values to the server.

input type="checkbox"

Attributes

Core (id, class, style, title), Internationalization, Events, Focus (accesskey, tabindex, onfocus, onblur)

checked="checked"

disabled="disabled"

name="text" (Required)

readonly="readonly"

value="text" (Required)

Checkboxes can be used individually to transmit specific name/value coordinates to the server when checked. By default, a checkbox is not checked; to make it checked when the page loads, simply add the checked attribute to the corresponding input element. In XHTML, you must provide a value for every attribute, so the correct syntax is checked="checked".

When the box is checked, the corresponding value is transmitted with the form to the processing program on the server. The values for unchecked boxes are not sent.

If you assign a group of checkboxes the same name, they behave like a multiple-choice list in which the user can select more than one option for a given property, as shown in the following markup and in Figure 15-5.

     <p>Which of the following operating systems have you used?</p>     <input type="checkbox" name="os" value="WinXP" /> Windows XP     <input type="checkbox" name="os" value="Linux" checked="checked" /> Linux     <input type="checkbox" name="os" value="OSX" checked="checked" /> Macintosh OSX     <input type="checkbox" name="os" value="DOS" /> DOS

Figure 15-5. Multiple checkboxes in a group may be selected

15.2.1.5. Radio button

Radio buttons (type="radio ") are another kind of button that users can toggle on and off. Unlike checkboxes, when a group of radio buttons share the same control name, only one button within the group can be "on" at one time, and all the others are "off." They are used when the options are mutually exclusive.

input type="radio"

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

checked="checked"

disabled="disabled"

name="text" (Required)

readonly="readonly"

value="text" (Required)

In this example (Figure 15-6), only one operating system may be selected. The checked attribute makes the button "on" by default when the page loads. Only data from the "on" radio button is sent when the form is submitted.

     <p>Which of the following operating systems have you used?</p>     <input type="radio" name="os" value="WinXP" /> Windows XP     <input type="radio" name="os" value="Linux" /> Linux     <input type="radio" name="os" value="OSX" checked="checked" /> Macintosh OSX     <input type="radio" name="os" value="DOS" /> DOS

Figure 15-6. Only one radio button in a group may be selected

15.2.1.6. Submit and reset buttons

Submit buttons, used for sending the form data to the processing agent, are added with the submit input element type. Reset buttons return all form controls to their initial values and are added with the reset input element type.

input type="submit"

Creates a submit button control; pressing the button immediately sends the information in the form to the server for processing.

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

name="text"

value="text"

input type="reset"

Creates a reset button that clears the contents of the elements in a form (or sets them to their default values).

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

value="text"

Every form (unless it consists of exactly one text field) needs a submit button control to initiate the transmission of information to the server. A form may have more than one submit button. By default, the submit button (type="submit") says "Submit" or "Submit Query," but you can change it by adding your own text after the value attribute.

The reset button (type="reset") reverts all form controls back to the state they were in when the form loaded (either blank or with values provided by the author with the value attribute). The default value (and hence the label for the button) is "Reset," but like the submit button, you can change its text by specifying its value, as shown in Figure 15-7.

     <p>You have completed the form.</p>     <input type="submit" /><input type="reset" value="Start Over" />

Figure 15-7. Submit and reset buttons

Some developers opt to leave the reset button out entirely, because there is no error-checking mechanism. If a user presses it accidentally, all the data already entered is lost. This isn't an uncommon occurrence.

15.2.1.7. Custom button

Authors may create a custom "push" button for use with client-side scripting (JavaScript) controls by setting the input type to button.

input type="button"

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

name="text"

value="text"

This button (type="button") has no predefined function, but rather is a generic tool that can be customized with a scripting language such as JavaScript (the scripting language should be declared with a meta element). Use the value attribute to write your own text on the button, as shown in the following markup and in Figure 15-8. The data from a type="button" input element is never sent when a form is submitted; this type is useful only with script programs on the browser.

     <p>This does something really exciting.</p>     <input type="button" value="Push Me!" />

Figure 15-8. Custom button

15.2.1.8. Image button

If you want to use your own image for a submit button, use the image input type.

input type="image"

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

align="top|middle|bottom"

alt="text"

disabled="disabled"

name="text" (Required)

src="URL"

You can replace the submit button with a graphic of your choice by using the image input (type="image"), as shown in the markup example and in Figure 15-9. Clicking on the image submits the form to the server and includes the coordinates of the mouse click with the form data. You must provide the URL of the graphic with the src attribute. It is recommended that you use alternative text (with the alt attribute) for image buttons.

     <input type="image" src="/books/4/439/1/html/2/graphics/sendme.gif" alt="Send me" />

Figure 15-9. Using an image for a button

15.2.1.9. File selection

The file input type allows users to submit external files with their form submission. The form control includes a text field and a "Browse" button that accesses the contents of the local computer.

input type="file"

Attributes

Core (id, class, style, title), Internationalization, Events, Focus (accesskey, tabindex, onfocus, onblur)

accept="MIME type"

disabled="disabled"

maxlength="number"

name="text" (Required)

readonly="readonly"

size="number"

value="text"

The file-selection form field (type="file") lets users select a file stored on their computer and send it to the server when they submit the form. It is displayed as a text entry field with an accompanying "Browse" button for selecting the file, as shown in the following markup and in Figure 15-10. As for other text fields, you can set the size and maxwidth values as well as the field's default text. When using the file input type, you should specify enctype="multipart/form-data" in the form element.

     <form enctype="multipart/form-data">     <p>Send this file with my form information:</p>     <input type="file" size="28" />     </form>

Figure 15-10. The file-selection form field

15.2.2. Multiline Text Areas

The textarea element creates a multiline, scrollable text entry box that allows users to input extended text entries.

textarea

     <textarea>...</textarea>

Core (id, class, style, title), Internationalization,

Events, plus onselect, onchange

Focus (accesskey, tabindex, onfocus, onblur)

cols="number" (Required)

disabled="disabled"

name="text" (Required)

readonly="readonly"

rows="number" (Required)

A textarea form control and its markup are presented here (Figure 15-11).

     <p>What did you dream last night?</p>     <textarea name="dream" rows="4" cols="45">Tell us your dream in 100 words or less</textarea>

Figure 15-11. The textarea form field

Specify the number of lines of text the area should display using the rows attribute. The cols attribute specifies the width (measured in characters). These attributes are required. Scrollbars are provided if the user types more text than fits in the allotted space.

The text that appears within the textarea element is the initial content of the text entry window when the form is displayed. When the form is transmitted, the browser sends the text along with the name specified by the required name attribute.

15.2.3. Creating Menus with the select Element

The select element creates a menu of options that is more compact than groupings of checkboxes or radio buttons. A menu displays as either a pull-down menu or as a scrolling list of choices, depending on how the size is specified. The select element works as a container for any number of option elements. It may also contain one or more optgroups, which are used to define a logical group of option elements.

select

     <select> ... </select>

Attributes

Core (id, class, style, title), Internationalization, Events, onfocus, onblur, onchange

disabled="disabled"

multiple="multiple"

name="text" (Required)

size="number"

tabindex="number"

option

     <option> ... </option>

Attributes

Core (id, class, style, title), Internationalization, Events

disabled="disabled"

label="text"

selected="selected"

value="text"

optgroup

     <optgroup>...</optgroup>

Attributes

Core (id, class, style, title), Internationalization, Events

disabled="disabled"

label="text" (Required)

15.2.3.1. Pull-down menus

The select element displays as a pull-down menu of options when no size specification is listed (the default) or when size="1". In a pull-down menu, only one item may be selected at a time. (Note that adding the multiple attribute turns the menu into a scrolling list, as described in the next section.) Clicking on the arrows or bar pops up the full menu, as shown in Figure 15-12.

     <p>What is your favorite ice cream flavor?</p>     <select name="ice_cream">     <option>Rocky Road</option>     <option>Mint Chocolate Chip</option>     <option>Pistachio</option>     <option selected="selected">Vanilla</option>     <option>Chocolate</option>     <option value="swirl">Fudge Ripple</option>     <option label="Praline Pecan">Super-duper Praline Pecan Smashup</option>     <option>Bubblegum</option>     </select>

Figure 15-12. Items in a select menu can be set to display after the menu is collapsed

By default, the first option element in the list displays when the form loads. Use the selected attribute in an option element to make it the default value for the menu (the option will be highlighted when the form loads).

The text within each option element is the value that is sent to the server. If you want to send a value for that choice that is not displayed in the list, provide it with the value attribute in the option element. In the sixth option element in the example, users will see "Fudge Ripple," but the value "swirl" will be sent to the form processing agent.

The label attribute, when provided, is displayed instead of the option element content. In the seventh option in the example, users will see "Praline Pecan," but the form will send the data "Super-duper Praline Pecan Smashup," because it is the default value provided in the option element.

15.2.3.2. Scrolling menus

To make the menu display as a scrolling list, simply specify the number of lines you'd like to be visible in the list using the size attribute, or add the multiple attribute to the select element, as shown in the following markup and in Figure 15-13. The multiple attribute makes it possible for users to select more than one option from the list.

     <p>What are your favorite ice cream flavors?</p>     <select name="ice_cream" size="6" multiple="multiple">     <option>Rocky Road</option>     <option>Mint Chocolate Chip</option>     <option>Pistachio</option>     <option selected="selected">Vanilla</option>     <option selected="selected">Chocolate</option>     <option value="swirl">Fudge Ripple</option>     <option>Super-duper Praline Pecan Smashup</option>     <option>Bubblegum</option>     </select>

This example also uses the selected attribute to preselect options and the value attribute for providing a value for the option that is different from the displayed text.

Figure 15-13. Use the size attribute to display a select menu as a scrolling list

15.2.3.3. Option groups

Conceptual groups of options may be organized into option groups , indicated with the optgroup element. This could be used by browsers to display hierarchical cascading menus. The value of the required label attribute is displayed as a heading for the following options.

The content of the optgroup element is one or more option elements. An optgroup element may not contain other optgroup elements. This example shows how the optgroup element could be used to structure a list of ice cream flavors similar to those in the previous examples. The label attribute provides a name for the group of options.

     <p>What are your favorite ice cream flavors?</p>     <select name="ice_cream" size="6" multiple="multiple">     <optgroup label="traditional">       <option>Vanilla</option>       <option>Chocolate</option>       <option>Mint Chocolate Chip</option>       <option>Pistachio</option>       <option>Fudge Ripple</option>     </optgroup>     <optgroup label="specialty">       <option>Inside-out Rocky Road</option>       <option>Super-duper Praline Pecan Smashup</option>       <option>Bubblegum</option>     </optgroup>     </select>

When a user selects an option from the list (such as "Pistachio" from the example), the content of that option is passed on with the variable name specified in the select element:

     ice_cream=Pistachio

15.2.4. Buttons

The button element defines a custom "button" that functions similarly to buttons created with the input tag. The button element may contain images (but not image maps) and any other content with the exception of a, form, and form control elements. Buttons may be rendered as shaded "3D" buttons with up/down motion when clicked (like submit and reset buttons), unlike the image input type, which is just a flat image.

button

     <button> ... </button>

Attributes

Core (id, class, style, title), Internationalization, Events,

Focus (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

name="text"

value="text"

type="submit|reset|button"

This example shows button elements used in place of "submit" and "reset" buttons. Note that the button elements include both images and text content.

     <button type="submit" name="submit"><img src="/books/4/439/1/html/2/thumbs-up.gif" alt="thumbs-up icon" /> Finished. Ready for step two.</button>     <button type="reset" name="reset"><img src="/books/4/439/1/html/2/thumbs-down.gif" alt="thumbs-down icon" /> Try again.</button>

Notice that the text that appears in the button (for example, "Try again") does not necessarily have to match the variable name (reset). Usability experts recommend using clear and descriptive labels for buttons such as "Please press when completed." The variable name for that button that is passed along for processing can be more utilitarian.