HTML and CSS Reference
In-Depth Information
FIGURE 2-7 The autofocus attribute in action.
Giving hints to users
Looking at Figure 2-7, it is quite hard to figure out which content goes in which field. Probably in a
real-world page, one would use labels and a more sophisticated layout to make it easier for users
to understand the expected content for each field. This is just the second problem I referred to a
moment ago.
Recently, developers got into the groove of displaying a short text message in an input text field
to instruct users. Before HTML5, this could only be accomplished by using a bit of JavaScript code. In
HTML5, the new placeholder attribute makes it a lot easier and even more natural.
Create a new HTML page and save it as placeholder.html . Now edit the content of the body, as
shown below:
<form>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<br />
<input type="submit" value="Save" />
</form>
As Figure 2-8 shows, both empty fields now provide a hint to users about the expected content.
FIGURE 2-8 The placeholder attribute in action.
Search WWH ::




Custom Search