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

More documents

Recommendations

Info

80 | Lesson 3 Email Phone Questions or Comments LICENSED PRODUCT NOT FOR RESALE 2. Save the file as L3-WebForm-orig.html. The rendered version is shown in Figure 3-20. Figure 3-20 The beginning of a Web form 3. The Web form looks unstructured. Ideally, you would use CSS to apply alignment, but because you haven’t learned CSS yet, you can apply a workaround to make the fields align vertically. One method is to add start and end tags around each label/input pair. This would align the fields vertically and add boxes around them. Using opening and closing tags instead of tags would accomplish the same thing but without adding boxes. For this exercise, use the tags. Figure 3-21 shows the same Web form with tags around the label/input pairs, including the comments field.
Building the User Interface by Using HTML5: Organization, Input, and Validation | 81 Figure 3-21 A Web form using tags to align fields vertically LICENSED PRODUCT NOT FOR RESALE 4. Add placeholder text to all fields. The result should look similar to Figure 3-22, if viewed in the Mozilla Firefox Web browser. Figure 3-22 A Web form with placeholders added to each field 5. Save the file as L3-WebForm-placeholders.html. 6. Leave the file and editing tool open if you continue to the next exercise during this session. ✚ MORE INFORMATION To learn more about HTML5 input element attributes, visit the W3C.org Web site at http://bit.ly/I1PW3P. Understanding Validation 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.
Page 1 and 2: Building the User Interface by Usin
Page 27: 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?