HTML and CSS Reference
As you can see, entering an invalid e-mail address and clicking the Submit button displays the
validation error message in an alert box instead of the browser's default callout.
Other Improvements to the <input> Element
In the preceding sections, you learned about the new input types available in HTML5. HTML5 also
enhances the <input> element with some features:
• Setting focus to a ield when a form is loaded
• Displaying hint or help text using placeholders
• Spellchecking the entered text
• Turning browser autocomplete on or off
• Providing a drop-down list for an input ield
These enhancements are discussed in the following sections.
When a web page loads in the browser, it's a good idea to set the initial focus to a data-entry field that the
user is supposed to fill out. You can indicate that an input field should receive focus using the autofocus
attribute. The following markup shows how:
<input id="irstName" type="text" name="irstName" autofocus="autofocus"
This line of markup declares a text input field that has its autofocus attribute set to autofocus . When
you open the web page in the browser, the firstName text box gets focus.
Displaying Help Text Using Placeholders
While filling out fields such as e-mail addresses, URLs, dates, and telephone numbers, it's a recommended
practice to let the user know the format in which the data is to be entered. One way to do this is to simply
place explanatory text in front of the data-entry field. The downside of this approach is that the label
occupies extra screen space. HTML5 placeholders provide an elegant way to add hint or help text to an
A placeholder is displayed as a watermark and is removed as soon as the user starts filling the field.
You specify a placeholder using placeholder attribute of the <input> element. The following line of markup
adds a placeholder that tells a user how to format a telephone number:
<input id="telephone" type="tel" placeholder="(123) 123-1234"/>
Figure 5-18 shows how this placeholder looks at runtime.
As you can see, the input field displays the placeholder as specified in the placeholder attribute. As
soon as you start typing the telephone number, the placeholder text disappears. If the input field is
emptied, the placeholder appears again.