Text Input Fields

Text fields are used to gather short text responses from a user. Text fields can also be used to gather numerical data.

Text fields are created using the <input> tag. When used to create text fields, the INPUT tag has two required attributes, TYPE and NAME, and four optional attributes, ID, VALUE, SIZE, and MAXLENGTH.

Sample HTML source for a text field:

<input type="text" name="id_number" value="Enter ID here" id="id_number" size="16" maxlength="16" />

See the table below for more examples of text input fields.

The TYPE Attribute (required)

There are three values of the TYPE attribute which are used to create text fields.

type="text"

INPUT tags with type="text" are used to create an empty box, one line high to gather data typed by the user.

type="password"

INPUT tags with type="password" also create an empty box, but when the user types information in that box, the characters are replaced by a masking character.
Note: Using a password field on a web page does not provide a secure method of transferring sensitive information. You must use a secure transaction method to be sure that sensitive data are not compromised.

type="hidden"

INPUT tags with type="hidden" do not appear on the screen of the form, but are useful when the CGI script being used requires information from the form. For instance, if you use the same script to process three different HTML order forms, using a hidden field to identify which form was submitted is useful.

The NAME Attribute (required)

The author of the form assigns a value to the NAME attribute. Choose names for your form fields which are meaningful. If you have a field that asks for the user's name, it is best to use name="name". Using name="field3" is not very useful for most uses of an HTML form.

The ID Attribute (optional, but required by accessibility standards)

The ID attribute is used to explicitly associate the specific Input tag with a specific LABEL tag. ID attributes are unique within a page.

The VALUE Attribute (optional)

The VALUE attribute is used to include default text in a text field. All but the first example at the bottom of the page includes the VALUE attribute. The VALUE attribute is required when using hidden fields.

The SIZE Attribute (optional)

The SIZE attribute defines the length of the text box in characters.

The MAXLENGTH Attribute (optional)

The MAXLENGTH attribute defines the maximum length in characters of the text the user can type. The number used for MAXLENGTH may be larger than, smaller than, or equal to the number used for the SIZE attribute.

The LABEL Tag

The LABEL tag associates the tag with the description.

The FOR Attribute

The FOR attribute of the LABEL tag specifies the Input tag that is associated with the LABEL.

Example	HTML Source	Description
Name:	<label for="text1">Name: <input type="text" name="text1" id="text1" /></label>	The SIZE attribute of a text field indicates the size of the field on the screen. The MAXLENGTH attribute of a text field indicates the largest size of the user's input. These two attributes do not affect each other.
Title:	<label for="text2">Title: <input type="text" size="10" maxlength="15" name="text2" value="value2" id="text2" /></label>
City:	<label for="text3">City: <input type="text" size="10" name="text3" value="value3" id="text3" /></label>
State:	<label for="text4">State: <input type="text" name="text4" value="value4" id="text4" /></label>
Password:	<label for="password">Password: <input type="password" size="10" maxlength="15" name="password" value="MyPassword" id="password" /></label>	Input in a password field is sent to the server in clear-text. Unless the web page is on a secure server, the form submission is not secure.
	<input type="hidden" name="subject" value="Baseball Registration" />	The VALUE attribute is required for hidden fields. Use hidden text to pass constant information to the CGI script, such as the subject line for a script that sends e-mail.