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

More documents

Recommendations

Info

82 | Lesson 3 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 LICENSED PRODUCT NOT FOR RESALE CERTIFICATION READY How does HTML5 validate data entered into a form by a user? 2.5 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 submission 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 during 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. 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 construct, and numbers entered into fields with the 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: Incorrectly entering data in the Zip Code field in the Firefox browser results in the error message shown in Figure 3-24.
Building the User Interface by Using HTML5: Organization, Input, and Validation | 83 Figure 3-24 Error message in the Firefox browser when entering an incorrect pattern LICENSED PRODUCT NOT FOR RESALE 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. TAKE NOTE * You must also validate Web forms just as you do an ordinary HTML document using the W3C Markup Validation service at http://validator.w3.org. 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: Email < input type="email" name="email" required placeholder="Email address"> 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: Phone < input type="text" name="phone" pattern="[0-9]{3}- [0-9]{3}-[0-9]{4}" placeholder="Phone number"> 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 regarding the phone number field? 7. Close the file, the editing tool or app development tool, and the Web browser. SKILL SUMMARY IN THIS LESSON YOU LEARNED: • 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)
Page 1 and 2: Building the User Interface by Usin
Page 29: Building the User Interface by Usin

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

Create successful ePaper yourself

Delete template?

Save as template?