5.8 Chapter Summary

This chapter examined the remaining essential HTML topics: tables and forms. Tables are properly used for presenting tabular data, though in the past, tables were also used for page layout. Forms provide a way to send information to the server and are thus an essential part of almost any real website. Both forms and tables have accessibility issues, and this chapter also examined how the accessibility of websites can be improved through the correct construction of tables and forms. Finally, this chapter covered some practical principles for designing and styling forms.

5.8.1 Key Terms

5.8.2 Review Questions

  1. What are the elements used to define the structure of an HTML table?

  2. Describe the purpose of a table caption and the table heading elements.

  3. How are the rowspan and colspan attributes used?

  4. Create a table that correctly uses the caption, thead, tfoot, and tbody elements. Briefly discuss the role of each of these elements.

  5. What are the drawbacks of using tables for layout?

  6. What is the difference between HTTP GET and POST? What are the advantages and disadvantages of each?

  7. What is a query string?

  8. What is URL encoding?

  9. What are the two different ways of passing information via the URL?

  10. What is the purpose of the action attribute?

  11. In what situations would you use a radio button? A checkbox?

  12. What are some of the main additions to form construction in HTML5?

  13. What is web accessibility?

  14. How can one make an HTML table more accessible? Create an example accessible table with three columns and three rows in which the first row contains table headings.

  15. What are the most common types of user input validation?

  16. Discuss strategies for handling validation errors. That is, what should your page do (from a user experience perspective) when an error occurs?

  17. What strategies can one adopt when designing a form that will help reduce validation errors?

  18. What problem does CAPTCHA address?

  19. Validation checks should occur at multiple levels. What are the levels, and why is it important to do so?

  20. What are some design precepts worth following when creating dta-input forms?

  21. How is Git different than GitHub?

  22. What does it mean that PHP is dynamically typed?

5.8.3 Hands-On Practice

Project 1: Book Rep Customer Relations Management

difficulty level: Beginners
Overview

Edit ch05-proj1.html and ch05-proj1.css so the page looks similar to that shown in Figure 5.43.

Instructions

  1. Within the first <section> element, create the order table. Be sure to add a <caption>. The color status values are created using markup similar to <span class="status status-pending">Pending</span>. The CSS classes status and status-pending have already been defined for you.

  2. Style the table using CSS.

  3. Within the second <section> element, create the form. Be sure to use the <fieldset> and <legend> elements for the form. As well, be sure to use the appropriate accessibility features in the form.

  4. Set up the form’s method attribute to GET and its action attribute to https://www.randyconnolly.com/tests/process.php.

Guidance and Testing

  1. Test the form in the browser. Verify that the output from process.php matches that shown in Figure 5.43.

  2. Change the form method to POST and retest.

Figure 5.43 Completed Project 1
The figure shows 2 Browser Windows, a Table, a User Form, and text data.

Project 2: Art Store

Difficulty Level: Intermediate
Overview

Edit ch05-proj2.html and ch05-proj2.css so the page looks similar to that shown in Figure 5.44.

Instructions

  1. The form at the top of this page consists of a text box, a list of radio buttons, and two drop-down lists. For the Genre list, make the other choices “Baroque,” “Renaissance,” and “Realism.” For the Bulk Actions list, make the others choices “Archive,” “Edit,” “Delete,” and “Collection.” The drop-down list items should have numeric values starting with 0. Notice the placeholder text in the search box.

  2. Create a table of paintings that looks similar to that shown in Figure 5.44. Be sure to make the table properly accessible.

  3. The checkboxes in the table should be an array of elements—for example, <input type="checkbox" name "index[]" value="10" />. The name and values are arbitrary, but each checkbox needs to have a unique value.

  4. The action buttons in each row are a series of <button> containers with the type="button" attribute (this prevents them from submitting the form) and an image within the button.

  5. Set the form’s method attribute to GET and its action attribute to https://www.randyconnolly.com/tests/process.php.

  6. While some of the styling has been provided, you will have to add some additional CSS styling. A selection of colors are defined within variables-palette-7.css.

Guidance and Testing

  1. Test the form in the browser. Verify that the output from process.php matches that shown in Figure 5.44.

Figure 5.44 Completed Project 2
The figure consists of 32 browser windows that illustrate how an input is given to a form.

Project 3: Share Your Travel Photos

Difficulty Level: Intermediate
Overview

Edit ch05-proj3.html and ch05-proj3.css so the page looks similar to that shown in Figure 5.45.

  1. Create the form and position the elements by placing them within a table. While we do not believe that this is best practice, legacy (i.e., older) sites often use tables for layout, so it may be sensible to get some experience with this approach. In the next chapter, you will learn how to use CSS for layout as a better alternative.

  2. For the drop-down lists, add a few sensible items to each list. For the checkbox list, they should be an array of elements (see step 3 of Project 2). Notice also that this form makes use of a number of HTML5 form elements.

Figure 5.45 Completed Project 3
The figure shows 3 Browser Windows and 2 User Forms.
Guidance and Testing

  1. Test the form in the browser. Verify that the output from process.php (see step 4 of Project 1) matches that shown in Figure 5.45. Because this form uses HTML5 input elements that are not supported by all browsers, be sure to test in more than one browser.