Forms - HTML5 - page 80

3.9 Autofocusing a Form Field

Problem
You want to place the focus in a particular form field when a page loads.

Solution
Apply the HTML5 autofocus attribute to only one form field:
<form>
<p><label>Search <input type="search" name="query" autofocus ></label></p>
<p><button type="submit">Submit</button></p>
</form>

Discussion
Autofocus behavior on the Web is alternately loved or hated. It's great when the search
box on Google is autofocused, but it's roundly hated when the user expects to be able
to scroll a page by pressing the down arrow key but the page has autofocused in a field.
A native solution both eliminates the need to write JavaScript and is potentially more
accessible. When implementing the autofocus attribute, remember that it may be
specified only once per document , not per form! To maintain accessibility, a user agent
may honor a user setting or action that would override the focus action.
If a user agent does not recognize the autofocus attribute, it will be ignored. You can
still use JavaScript to autofocus a field.
For a browser support reference of autofocus , please see Table 3-9 .

Table 3-9. Browser support for the autofocus attribute

IE Firefox Chrome Safari Opera iOS Android

10 Platform Preview 2 4.0+ 3.0+ 4.0+ 10.0+ ✓✓

See Also
See Recipe 3.14 , for details.

3.10 Displaying Placeholder Text

Problem
You want to display some hint or help text within a form field.