WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Working with Text Fields

Text fields are single-line widgets for text input, as in Figure 68.13. Text fields are probably the most common widget on the Web.

The width of the text fieldin characters, not pixelsappears in the size attribute. The maximum number of characters that the visitor can type into the field appears in the maxlength attribute, and the default text appears in the value field.

Listing 68.13. View Source for Figure 68.13.

<form>
<input type="text" name="typeTextHere" value="Type text here." size="50" maxlength="80">
</form>

When you click inside a text field, the browser doesn't automatically select the entire string of text in the field. This is often inconvenient when your text fields contain preset values, because the visitor has to clear out the old information before typing in new information. A simple line of JavaScript remedies this problem nicely:

[View full width]
<input type="text" name="typeTextHere" value="Type text here." size="50" maxlength="80"
 onFocus="this.select();">

FAQ What happens if you omit the size attribute of a text field? If you omit the size attribute, the browser uses its default width for text fields, which varies depending on the browser. If you omit the maxlength attribute, there is no limit to the number of characters that the visitor can type into the field.

The onFocus event fires when the visitor highlights the text field, either by clicking inside it or by tabbing onto it. When the text field receives focus, the select() method selects everything in the field.