Assembling Forms and Applications - HTML5 with CSS3 - page 244

Listing 8-2 . A text control with a prepopulated value attribute
<p><label for= " zip " >Update your ZIP code <i>(maximum 5 characters)</i></label>
<input type="text" id="zip" name="postcode" size="5" maxlength="5" value="94710"></p>
Figure 8-2 shows how this would look in a browser (this is in Firefox on Mac OS X; other browsers might
differ slightly).
Figure 8-2. The text field as it appears in a browser with default styling
This example also has an optional (and largely presentational) size attribute, defining the width of the field
as a number of characters. By default, most browsers will display text fields around 20 or 25 characters
wide. You can also modify the width of a text field with the CSS width property using any unit you like
(ems, pixels, a percentage, etc.) and a CSS width will override the size attribute, if present.
input type="search"
The search input type is new in HTML5 and, as you might suspect, indicates a text field where visitors can
enter search terms. In years past this was accomplished with an ordinary input type="text" , but by
adding a dedicated type for search fields, browsers can treat those fields differently than ordinary text
fields. For example, a browser might save terms you've previously searched for and offer to autocomplete
terms from your own search history as you type into the same field on later searches, which can be
especially handy on mobile devices where typing is cumbersome. Older browsers—as well as current
browsers that don't yet give any special treatment to search inputs—treat a search control as an ordinary
text control and it still works just as well, though without any extra features.
Listing 8-3 shows a search input with a placeholder attribute offering a suggestion of what you might
search for. An input type="text" would be just as functional and processed the same way by a form
handler, but using the new search type garners some special treatment in the latest browsers.
Listing 8-3 : A search input bearing a placeholder attribute
<p><label for="search">Search for products</label>.
<input type="search" id="search" name="q" placeholder="utility belts"></p>
The placeholder attribute is also new in HTML5. It lets the author supply some short instructional text in
the control itself, suggesting a value to enter, or an example of how the user should format the data they
provide. The placeholder text disappears when the field is in focus, and reappears when the field loses
focus if there is no other value to display. If the element includes a value attribute, the supplied value will
override the placeholder.
In the past, many developers accomplished this feat using the value attribute and automatically clearing it
with JavaScript when the field was focused, but that meant the placeholder text could be submitted with
the form. The placeholder attribute eliminates that problem; placeholder text is never submitted, it's
strictly for visual feedback and improved accessibility. We're introducing the placeholder attribute here