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

More documents

Recommendations

Info

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.
Building the User Interface by Using HTML5: Organization, Input, and Validation | 79 The datalist element enables you to present the user with a drop-down list of options to select from. Only the options in the list may be selected. Alternately, you could insert type="text" into the input element to create a text box in which the user enters text. The following example lets the user select from one of three countries: LICENSED PRODUCT NOT FOR RESALE The search value for the type attribute enables you to create a search feature for a Web page. An example of the markup is: Finally, the autofocus attribute moves the focus to a particular input field when a Web page loads. An example of autofocus is when you open a search engine Web page and the insertion point automatically appears in the input box so you can type search terms without first clicking in the box. An example of the markup to place the focus on a field named fname when a page loads is: autofocus has historically been handled by JavaScript, and if a user turns off JavaScript in a Web browser, the autofocus feature doesn’t work. To work around this issue, the HTML5 autofocus attribute is supported by all major browsers and behaves consistently across all Web sites. CREATE A SIMPLE WEB FORM GET READY. To create a simple Web form, perform the following steps: 1. Using an HTML editor or app development tool and a Web browser, create a simple Web form with the following markup: Contact Us Name
Page 1 and 2: Building the User Interface by Usin
Page 25: Building the User Interface by Usin

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

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?