Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
10.5 The Tag
Use the tag to define any one of a number of common form "controls," as they are called in the HTML 4.0 standard, including text fields, multiple-choice lists, clickable images, and submission buttons. Although there are many attributes for the tag, only the type and name attributes are required for each element (only type for a submission or reset button; see following explanation). And as we describe in detail later, each type of input control uses only a subset of the allowed attributes. Additional attributes may be required based upon which type of form element you specify.
Table 10.1
summarizes the various form types and attributes, required and optional.
Table 10.1: Required and Optional Form Element Attributes
Form Tag or
Attributes
Type (× =
required;
^
=
optional;
blank
= not
supported)
accept
accesskey align alt border cols checked disabled maxlength multiple name notab onBlur onChange onClick onFocus onSelect readonly rows size src tabindex taborder usemap value wrap
button
^
^
×
^
^
^
^
^
^
×
checkbox
^
^
^
×
^
^
^
^
^
×
file
^
^
^
^
×
^
^
^
^
^
^
^
^
^
^
hidden
×
×
image
^
^
^
^
^
^
^
^
×
^
^
^
password
^
^
^
×
^
^
^
^
^
^
^
^
^
^
×
radio
^
^
^
×
^
^
^
^
^
×
reset
^
^
^
^
^
^
^
submit
^
^
^
^
^
^
^
^
text
^
^
^
×
^
^
^
^
^
^
^
^
^
^
^
^
^
×
^
^
^
^
^
^
^
×
^
^
^
^
^
^
^
^
^
×
^
^
^
^
^
^
^
^
Function:
Create an input element within a form
Attributes:
ACCEPT ONFOCUS
ACCESSKEY ONKEYDOWN
ALIGN ONKEYPRESS
ALT ONKEYUP
BORDER
ONMOUSEDOWN
CHECKED ONMOUSEMOVE
CLASS ONMOUSEOUT
DIR ONMOUSEUP
DISABLED ONSELECT
ID READONLY
LANG SIZE
MAXLENGTH SRC
NAME STYLE
NOTAB
TABINDEX
OMMOUSEOVER TABORDER
ONBLUR TITLE
ONCHANGE TYPE
ONCLICK USEMAP
ONDBLCLICK VALUE
End tag:
None
Contains:
Nothing
Used in:
form_content
You select the type of control to include in the form with the tag's required type attribute, and you name the field (used during the form-submission process to the server; see earlier description) with the name attribute. Although the value of the name attribute is technically an arbitrary string, we recommend that you use a name without embedded spaces or punctuation. If you stick to just letters and numbers (but no leading digits) and represent spaces with the underscore (
) character, you'll have fewer problems. For example, "cost
in_dollars" and "overhead_percentage" are good choices for element names; "$cost" and "overhead %" might cause problems.
Notice, too, that the name you give to a form control is directly associated with the data that the u ser inputs to that control and which gets passed to the form-processing server. It is not the same, and does not share the same name space, as the name attribute for a hyperlink fragment or a frame document.
10.5.1 Text Fields in Forms
The HTML standard lets you include four types of text entry controls in your forms: a conventional text entry field, a masked field for secure data entry, a field that names a file to be transmitted as part of your form data, and a special multiline text entry
10.5.1.1 Conventional text fields
The most useful as well as the most common form input control 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 control 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 form element to text. Include a name attribute as well; it's required.
What constitutes a line of text differs among the various browsers. Fortunately, HTML gives us a way, with size and maxlength attributes, to dictate the width, in characters, of the text input display box, and how many total characters to accept from the user, respectively. The value for either attribute is an integer equal to the maximum number of characters you'll allow the user to see and type in the field. If maxlength exceeds size, then text scrolls back and forth within the text entry box. If maxlength is smaller than size, there will be extra blank space in the text entry box to make up the difference between the two attributes.
The default value for size is dependent upon the browser; the default value for maxlength is unlimited. We recommend that you set them yourself. Adjust the size attribute so that the text entry box does not extend beyond the right margin of a typical browser window (about 60
characters with a very short prompt). Set maxlength to a reasonable number of characters; for example, 2 for state abbreviations, 12 for phone numbers, and so on.
A text entry field is usually blank at first until the user types something into it. You may, however, specify an initial default value for the field with the value attribute. The user may modify the default, of course. If the user presses a form's reset button, the value of the field is reset to this
default value. [Reset buttons, 10.5.4.2]
These are all valid text entry form controls:
The first example creates a text entry field set to the browser's default width and maximum length. As we argued, this is not a good idea, because defaults vary widely among browsers, and your form layout is sure to look bad with some of them. Rather, fix the width and maximum number of acceptable input characters as we do in the second example: it lets the user type in up to ten characters inside an input box ten characters wide. Its value will be sent to the server with the name "zipcode" when the user submits the form.
The third example control tells the browser to display a text input box 30 characters wide into which the user may type up to 256 characters. The browser automatically scrolls text inside the input box to expose the extra characters.
The last text input control is three characters wide, lets the user type in only three characters, and sets its initial value to 100.
Notice in the second and fourth examples, it is implied that certain kinds of data are to be entered by the user - a postal code or a numeric rate, respectively. Except for limiting
how many
, HTML provides no way for you to dictate
what
characters may be typed into a text input field. For instance, in the last example field, the user may type "ABC" even though you intend it to be a number less than 1,000. Your server-side application or an applet must trap erroneous or mistaken input, as well as check for incomplete forms, and send the appropriate error message to the user when things aren't right. That can be a tedious process, so we emphasize again: provide clear and precise instructions and prompts. Make sure your forms tell users what kinds of input you expect from them, thereby reducing the number of mistakes they may make when filling it out.
10.5.1.2 Masked text controls
Like the Lone Ranger, the mask is on the good guys in a masked text field. It behaves just like a conventional text control in a form, except that the user-typed characters don't appear onscreen. Rather, the browser obscures the characters in a masked text to keep such things as passwords and other sensitive codes from prying eyes.
To create a masked text control, set the value of the type attribute to password. All other attributes and semantics of the conventional text control apply to the masked one. Hence, you must provide a name, and you may specify a size and maxlength for the field, as well as an initial value (we recommend it).
Don't be misled: a masked text control is not all that secure. The typed-in value is only obscured onscreen; the browser transmits it unencrypted when the form is submitted to the server, unless you are using a special secure-forms server. So, while prying eyes may not see them onscreen, devious bad guys may steal the information electronically.
10.5.1.3 File selection controls
As its name implies, the file-selection control lets users select a file stored on their computer and send it to the server when they submit the form. The browser presents the file-selection form control to the user like other text fields, and accompanied by a button labeled "Browse" to its right.
Users either type the pathname of the file 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 control in a form by setting the value of the type attribute to file. Like other text controls, the size and maxlength of a file-selection field should be set to appropriate values, with the browser creating a field 20 characters wide, if not otherwise directed. Since file and directory names differ widely among systems, it makes no sense to provide a default value for this control. As such, the value attribute should not be used with this kind of text control.