Text Field
A text field is a form of input that collects a small amount of keyboard input from the user. For larger amounts of text, see the text area.
Basics
Bare-bones code for a text field is:
<INPUT TYPE="text">
This renders the text field only, not any associated label (even if it is specified as an attribute).
Usage
Text areas are used to collect a small amount of data from the user, typically a brief datum such as name, phone number, ZIP code, etc., that does not contain line breaks. For data that is entered in a number of text fields but is a conceptual unit, consider using a field set to associate the separate fields.
Processing
Each text field passes a name=value pair where the value is the content of the text field at the time the form is submitted.
Be careful about how you parse input from a form that contains a text field. A mischievous user might attempt to pass variables to your script by entering data such as "&name=value&name=value". Since the content is urlencorded for transmission, it's not a problem so long as you split the input into name=value pairs before decoding the input.
HTML Attributes
Typical
- SIZE - Width of the field in characters.
Unusual
- MAXLENGTH - The maximum number of characters the user may enter.
- ACCESSKEY - A shortcut key to put focus on the element.
- DISABLED - Grays out the element and prevents the user from altering its value.
- TABINDEX - Specified as a number, this alters the default tabbing order of a form.
JavaScript
Properties
- value - Returns (or assigns) the current value of the field.
- defaultValue - Returns (or assigns) the default value of the field
- maxlength - Returns (or assigns) the MAXLENGTH attribute.
- size - Returns (or assigns) the SIZE attribute.
Methods
- select() - Highlights (selects) the text content within the field.
Event Handlers
- onkeydown - Takes effect when focus is within the element and a key is pressed
- onkeyup - Takes effect when focus is within the element and a key is released
- onkeypress - Takes effect when focus is within the element and a key is pressed and released
- onselect - Takes effect when some text in the field has been selected by the user
Misc Notes
Text fields will capture more data than can be displayed within their borders. For that reason, it is advisable to use SIZE to make the field large enough to capture the amount of data that is expected.
However, do not use MAXLENGTH to restrict input for cosmetic purposes. For example, a "typical" last name is not more than twenty characters, but unless there is a technical reason for doing so (such as database field length), do not restrict the user from entering as many characters as are needed.