Building the User Interface by Using HTML5: Organization ... - server

78 | Lesson 3
Figure 3-19
A very simple form
LICENSED PRODUCT NOT FOR RESALE
Now let’s look at some of the new HTML5 attributes and values. Although this section
doesn’t address everything listed in Tables 3-4 and 3-5, it does describe and show examples of
some of the most commonly used attributes and values.
The required attribute requires information in a field when the form is submitted. The
email attribute (shown in the preceding example) requires the user to enter an email
address. The browser will alert the user with an error message to fix these issues.
An example of an input element with the required and email attributes is:
To make a form more user-friendly, add placeholder text. Placeholder text is text displayed
inside an input field when the field is empty. It helps users understand the type of information
they should enter or select. When you click on or tab to the input field and start typing,
the newly entered text replaces the placeholder text. An example of the placeholder
attribute is:
The pattern attribute provides a format (a regular expression) for an input field, which is
used to validate whatever is entered into the field. For example, let’s say you have a required
input field for employee ID. Every employee ID begins with two capital letters followed
by four digits. You would use a text input field with the required and pattern attributes to
ensure that the field (1) is populated when the user clicks the submit button and (2) contains
a value that matches the correct format for an employee ID. If the user hovers over the
field, the message in the title attribute displays, which you add separately. An example of
the pattern attribute is:
You can use the pattern attribute with these types: text, search, url,
telephone, email, and password.