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.

Figure 68.13. Use text fields for single-line text input.


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.

TIP

You can add onFocus="this.select();" to password fields and text areas, too.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net