HTML5 provides new attributes that validate Web form fields as users are entering data or when they click the submit button. The attributes include required, email, and pattern, among others.
Validation is the process of verifying that information entered or captured in a form is in the correct format and usable before sending the data to the server. Some things that are verified during validation are:
• Required fields are empty
• Email addresses are valid
• Dates are valid
• Text does not appear in a numeric field or vice versa
Using HTML 4.01 and previous specifications, you often needed to use a lot of JavaScript or scripting in another language to create custom validity rules and response messages, or to determine if an element is invalid.
In HTML5, several of the input element types you learned about in the last section offer automatic validation of input, which means the browser checks the data the user inputs.
This is referred to as client-side validation, because the input data is validated before sub-mission to the server. (In cases in which the server validates data received from an input form, it’s referred to as server-side validation.) If the user enters the wrong type of data into a field, such as an email address in a field with the url attribute, the browser instructs the user to enter a valid URL. Let’s look at examples of the default error messages that are generated dur-ing automatic validation.
The required attribute avoids the problem of empty fields that need to be populated. When a user skips a required field and clicks the submit button, an error message appears as shown in Figure 3-23. This example uses the Mozilla Firefox Web browser.
CERTIFICATION READY How does HTML5 validate data entered into a form by a user?
2.5
Figure 3-23
Error message in the Firefox browser for a required field
HTML5 also offers validation of Web addresses entered into fields with the
<input type="url"> construct, and numbers entered into fields with the <input type="number"> construct. If you use the min and max attributes with type="number", you will receive an error message from the browser if you enter a number that’s too small or too large.
Finally, the pattern attribute prevents the user from entering data that doesn’t follow the pattern expression. In this example, the pattern attribute validates a five-digit zip code:
<input type= "text" name= "zipcode"
pattern= "[0-9] {5}"
title= "Five-digit zip code" />
Incorrectly entering data in the Zip Code field in the Firefox browser results in the error mes-sage shown in Figure 3-24.
As mentioned previously, no markup is required to activate HTML5 form validation—it’s on by default. To turn it off, use the novalidate attribute for specific input fields.
ADD VALIDATION FIELDS TO A WEB FORM
GET READY. To add validation fields to a Web form, perform the following steps:
1. Using an HTML editor or app development tool, open L3-WebForm-placeholders.html.
2. Save the file as L3-WebForm-valid.html.
3. Add the required attribute to the email field, as follows:
<p>
<label for="email">Email</label>
< input type="email" name="email" required placeholder="Email address">
</p>
4. Add the pattern attribute to the phone field. The expression should restrict entry to area code and phone number, in the format XXX-XXX-XXXX, as follows:
<p>
<label for="phone">Phone</label>
< input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Phone number">
</p>
5. Save the file, and then view it in a Web browser. Type text in each input field except the email field and click the Submit button. Did you receive an error message prompting you to enter an email address?
6. Type text in each field again including the email field, but this time type a phone number without the area code and then click Submit. Did you receive an error regard-ing the phone number field?
7. Close the file, the editing tool or app development tool, and the Web browser.
Figure 3-24
Error message in the Firefox browser when entering an incorrect pattern
You must also vali-date Web forms just as you do an ordinary HTML document using the W3C Markup Validation service at http://validator.w3.org.
TAKE NOTE
*
S K I L L S U M M A R Y
INTHIS LESSONYOULEARNED:
• HTML5 introduces several new elements for organizing content and forms. They represent the new semantic markup that’s an important part of HTML5.
• Semantic markup uses tag names that are intuitive, making it easier to build and modify HTML documents, and for Web browsers and other programs to interpret.
• New HTML5 elements for structuring and organizing content in an HTML document include header, footer, section, nav, article, and aside. These elements reduce the number of div tags required in a document.
• Tables and lists give structure to specific information in HTML documents. A table contains rows and columns, and displays data in a grid. In HTML, you can create ordered and
(Continued)
unordered lists. Each item in an ordered list is marked by a number or letter. An unordered list is a bulleted list.
• Developers use Web forms as the interface for collecting information from Web site and client application users. HTML input elements serve to build a form’s interface and ensure that information is collected from users consistently.
• Most Web forms, or at least many fields in most forms, require specifically formatted input. The new HTML5 form and input attributes are intuitive, easy to use, and replace a lot of scripting that was required in HTML 4.01 and previous versions.
• Validation ensures that information entered in an input field of a Web form is in the cor-rect format and usable before sending the data to the server.
• HTML5 provides new attributes that validate Web form fields as users are entering data or when they click the submit button. The attributes include required, email, and pattern, among others.
Fill in the Blank
Complete the following sentences by writing the correct word or words in the blanks provided.
1. An HTML contains rows and columns, and is used to display infor-mation in a grid format.
2. Class and ID are attributes, which means they can be used with any HTML element.
3. An list orders the list entries using numbers, by default.
4. An list displays list entries in a bulleted list.
5. The HTML5 element presents a list (or menu) of commands, usually with buttons.
6. Form is the information a user enters into fields in a Web or client application.
7. The attribute requires information in a field when the form is submitted.
8. text is displayed inside an input field when the field is empty. It helps users understand the type of information they should enter or select.
9. is the process of verifying that information entered or captured in a form is in the correct format and usable before sending the data to the server.
10. The attribute moves the focus to a particular input field when a Web page loads.
Multiple Choice
Circle the letter that corresponds to the best answer.
1. Which HTML5 element defines subdivisions in a document, such as chapters, parts of a thesis, or parts of a Web page whose content is distinct from each other?
a. aside b. section c. header d. article