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

More documents

Recommendations

Info

72 | Lesson 3 TAKE NOTE * The menu element was deprecated in HTML 4.01 but has been redefined in HTML5. HTML5 also uses the menu element, which presents a list (or menu) of commands, usually with buttons. The W3C prefers that you use the menu element only for context menus, lists of form controls and commands, toolbars, and similar items. The HTML5 menu element is not widely supported by browsers as of this writing. LICENSED PRODUCT NOT FOR RESALE CREATE AN ORDERED LIST GET READY. To create an ordered list, perform the following steps: 1. Using an HTML editor or app development tool and a Web browser, enter the following: Desktops Laptops Tablets Smartphones 2. Save the file as L3-OrderedList.html and view it in a Web browser. 3. To change the initial markers to capital letters, insert type="A" in the tag, like this: 4. Save the file and view it in a Web browser. Do the list items now start with A, B, C, and D? 5. To start list numbering at 5, insert start="5" in the tag. Replace the current tag with this: 6. Save the file and view it in a Web browser. Do the list items now start with 5 and end with 8? 7. Close the file, and then leave the editing tool and Web browser open if you continue to the next exercise during this session. ■ Choosing and Configuring HTML5 Tags for Input and Validation THE BOTTOM LINE 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. Validation ensures that the entered information is in the correct format and usable before sending the data to the server. In HTML, input and validation apply to forms. A Web form is a Web page that provides input fields for a user to enter data, which is sent to a server for processing. From there, the information is stored in a database or forwarded to a recipient. Web forms are used as the interface for many different tasks: • To log in to a Web site, server, or network • To collect contact information, such as name, email address, phone number, and mailing address • To sign up for emails or newsletters from an organization
Building the User Interface by Using HTML5: Organization, Input, and Validation | 73 • To capture user comments after an article on a Web site • To select preferences on a Web page • To enter reservation information Many client applications use some kind of Web form to interact with the user. You use HTML input elements to build a form’s interface and ensure that information is collected from users consistently. Validation ensures that the entered information is in the correct format and usable before sending the data to the server. For example, if you enter “637 Park Street” into a Web address field, which is expecting something like “http://www.example.com”, validation will fail and prompt the user to correct the input. Validation also reduces the amount of spam and malicious content that can make its way to the server or the recipient of the form’s data. LICENSED PRODUCT NOT FOR RESALE Understanding Input and Forms TAKE NOTE * Check the functionality of any form you create in many different browsers during development. This ensures the elements and attributes you select work as expected or the fall-back method collects acceptable input. Table 3-4 Form element attributes used in HTML5 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. Form input is the information a user enters into fields in a Web or client application form. (To keep things simple, we use the term “Web form” most of the time, but it applies to client application as well.) HTML5 introduces several new form and input element attributes, such as url for entering a single Web address, email for a single email address or a list of email addresses, and search to prompt users to enter text they want to search for. The new attributes make form development much easier than in the past. What used to take a lot of scripting can be accomplished by HTML5 tags. On the flip side, many of the new attributes are not yet supported by all of the major browsers. However, if you use a new element or attribute that isn’t yet supported, the browser “falls back” to an alternate display, a different form of input, or what have you. HTML5 introduces two new attributes for the form element—autocomplete and novalidate. All attributes for the form element are listed in Table 3-4, with the new attributes indicated with a double asterisk. ATTRIBUTE VALUE DESCRIPTION accept-charset character_set Specifies a set of character encodings the server accepts action URL Specifies the Web address to which form data is sent autocomplete** on Specifies whether autocomplete is on or off off in a form or input field; can be “on” for specific input fields and “off” for the form, or vice versa enctype application/x-www- Specifies the encoding type for form data form-urlencoded when submitting the data to a server; multipart/ used only for method="post" form-data text/plain (continued)
Page 1 and 2: Building the User Interface by Usin
Page 19: Building the User Interface by Usin

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

Create successful ePaper yourself

Delete template?

Save as template?