Home \ HTML Tutorials \ Creating a Single-Line Input Field on a Form

Creating a Single-Line Input Field on a Form

When you want the site visitor to enter a short string of text, insert an <input> tag with its type attribute set to “text” within the form. For example, the two <input> tags in the following code create the First Name and Last Name fields.

<p>First Name: <input type="text" name="FirstName" size="15"> Last Name: <input type="text" name="LastName" size="20"></p>

<p>[Form RESET and SUBMIT pushbuttons go here]</p>

</form>

Notice that the text label to the left of each of the two single-line text fields on the form are not a part of the <input> tag. Each single-line text <input> tag does, however, have the following attributes:

• type: Set to “text” to let the Web browser know that the form element is a single-line text box.

• id: Used to assign a name to the input field. You can use the value of the id attribute to work with the contents of the input field within a script embedded in the Web page HTML. Note that each id you use within the Web page HTML must be unique, that is, no two id values can be the same within a single page.

• name: Used to identify the input field. You can use the value of the name attribute to refer to the value in the input field within a script running at the Web browser, and the browser passes the field’s name along with the field’s value to the Web server when the visitor clicks the form’s Submit button.

• size: The width, in characters, of the text box.

• value: Tells the Web browser to place the text you assign to the attribute into the input field when the browser first draws the form.

• maxlength: The maximum number of characters the visitor can type into the input field.

• readonly: When present, the field can receive the focus. However, the visitor cannot change the value in the input field.

• disabled: When present, the field cannot receive the focus, nor can the visitor change the input field’s value. Moreover, the browser does not submit the field’s name or value to the Web server with the form results.

• tabindex: Used to set the tabbing order in which form elements receive the focus. By assigning ascending values to the tabindex attribute within the tag for each form element, you can tell the browser where to move the cursor (that is, the focus). Each time the visitor presses TAB, the browser will move the focus to the form element with the next highest tabindex.

• accesskey: The key the user can press while holding down the ALT key (or the COMMAND or CONTROL key on a Macintosh system) to move to (that is, give the focus to) the input field.

The <input> tags in the current example tell the Web browser to place two single-line text boxes (named “FirstName” and “LastName”) on a form named ExampleForm. The FirstName text box is 15 characters in length; the LastName text box has a length of 20 characters.

When entering text into a single-line text box, the site visitor can enter any number of text characters into the field. However, the Web browser will display only the number of characters given by the <input> tag’s size attribute onscreen at once. In the current example, if the visitor enters a 20-character first name, because the input field is only 15 characters wide, only 15 characters of the first name are visible at a time. (If you want to limit the number of characters the visitor can enter, add a maxlength attribute set to the maximum acceptable string length to the <input> tag.)