 |  |
6.2. The <input> Tag
Use the <input> tag to define any one of a number of common form elements, including text fields, multiple-choice lists, clickable images, and submission buttons. Although there are many attributes for this tag, only the type and name attributes are required for each element (only type for a submission button). Each type of input element uses only a subset of the allowed attributes. Additional <input> attributes may be required based on the specified form element.
You select the type of element to include in the form with the <input> tag's required type attribute and name the field (used during the form-submission process to the server) with the name attribute.
The most useful (as well as the most common) form-input element is the text-entry field. A text-entry field appears in the browser window as an empty box on one line and accepts a single line of user input that becomes the value of the element when the user submits the form to the server. To create a text entry field inside a form in your HTML document, set the type of the <input> form element to text. You must include a name attribute as well.
The size and maxlength attributes allow you to dictate the width, in characters, of the text-input display box and how many total characters to accept from the user, respectively. The default value for size is dependent on the browser; the default value for maxlength is unlimited.
A text-entry field is usually blank until the user types something into it. You may, however, specify an initial default value for the field with the value attribute.
6.2.1. Password Fields
Password fields behave like a regular text field in a form, except that the user-typed characters don't appear onscreen. Rather, the browser obscures the characters in masked text to keep such things as passwords and other sensitive codes from prying eyes.
To create a password field, set the value of the type attribute to password. All other attributes and semantics of the conventional text field apply to the masked field. Note that a masked text field is not all that secure, since the browser transmits it unencrypted when the form is submitted to the server.
6.2.2. File-Selection Fields
The file-selection form field (introduced by Netscape Navigator) lets users select a file stored on their computer and send it to the server when they submit the form. Browsers present the file-selection form field to the user like other text fields, but it's accompanied by a button labeled "Browse." Users either type the pathname directly as text into the field or, with the Browse option, select the name of a locally stored file from a system-specific dialog box.
Create a file-selection field in a form by setting the value of the type attribute to file. Like other text fields, the size and maxlength of a file-selection field should be set to appropriate values.
6.2.3. Checkboxes
The checkbox element gives users a way to quickly and easily select or deselect an item in your form. Checkboxes may also be grouped to create a set of choices, any of which may be selected or deselected by the user.
Create individual checkboxes by setting the type attribute for each <input> tag to checkbox. Include the required name and value attributes. If the item is selected, it contributes a value when the form is submitted. If it is not selected, that element doesn't contribute a value. The optional checked attribute (no value) tells the browser to display a checked checkbox and include the value when submitting the form to the server, unless the user specifically clicks the mouse to deselect (uncheck) the box.
The browsers include the value of selected (checked) checkboxes with other form parameters when they are submitted to the server. The value of the checked checkbox is the text string you specify in the required value attribute.
By giving several checkboxes the same name attribute value, you create a group of checkbox elements. The browser automatically collects the values of a checkbox group and submits their selected values as a comma-separated string to the server, significantly easing server-side form processing.
6.2.4. Radio Buttons
Radio buttons are similar in behavior to checkboxes, except only one in the group may be selected by the user. Create a radio button by setting the type attribute of the <input> element to radio. Like checkbox elements, radio buttons each require a name and value attribute; buttons with the same name value are members of a group. One of them may be initially checked by including the checked attribute with that element. If no element in the group is checked, the browser automatically checks the first element in the group.
You should give each radio button element a different value, so the server can sort them after submission of the form.
6.2.5. Submission Buttons
The submit button (<input type=submit>) does what its name implies, setting in motion the form's submission to the server from the browser. You may have more than one submit button in a form. You may also include name and value attributes with a submit button.
With the simplest submit button (that is, one without a name or value attribute), the browser displays a small rectangle or oval with the default label "Submit." Otherwise, the browser labels the button with the text you include with the tag's value attribute. If you provide a name attribute, the value attribute for the submit button is added to the parameter list the browser sends to the server.
6.2.6. Reset Buttons
The reset type of form <input> button is nearly self-explanatory: it lets the user reset—erase or set to some default value—all elements in the form. By default, the browser displays a reset button with the label "Reset" or "Clear." You can change that by specifying a value attribute with your own button label.
6.2.7. Custom Buttons
With the image type of <input> form element, you create a custom button, one that is a "clickable" image. It's a special button made out of your specified image that, when clicked by the user, tells the browser to submit the form to the server, and includes the x,y coordinates of the mouse pointer in the form's parameter list. Image buttons require a src attribute with the URL of the image file, and you can include a name attribute. You may also include the align attribute to control image alignment within the current line of text, much like the align attribute for the <img> tag.
6.2.8. Hidden Fields
The last type of form <input> element we describe in this chapter is a way to embed information into your forms that cannot be ignored or altered by the browser or user. Rather, the <input type=hidden> tag's required name and value attributes automatically get included in the submitted form's parameter list. These serve to "label" the form and can be invaluable when sorting out different forms or form versions from a collection of submitted and saved forms.
|  | |
| 6. Forms |  | 6.3. The <textarea> Tag |
Copyright © 2003 O'Reilly & Associates. All rights reserved.