Learning Web Design, 6th Edition

Chapter 9. Forms

9

Forms

In This Chapter

How forms work

Elements for adding form widgets

Making forms accessible

Form design basics

It didn’t take long for the web to shift from a network of pages to read to a place where you go to get things done—making purchases, booking plane tickets, signing petitions, searching a site, posting to social media…the list goes on! Web forms handle all of these interactions. We have a large collection of widgets and form controls that make it easy for users to fill out forms and for developers to create them. As HTML evolved, it became possible for tasks that once relied on JavaScript to be handled by markup and native browser behavior alone.

This chapter introduces web forms, how they work, all those widgets, and the markup used to create them. I’ll also briefly discuss the importance of web form design.

How Forms Work

There are two parts to a working form. The first part is the form that you see on the page itself that is created using HTML markup. Forms are made up of buttons, input fields, and drop-down menus (collectively known as form controls or widgets) used to collect information from the user. Forms may also contain text and other elements.

The other component of a web form is an application or script on the server that processes the information collected by the form and returns an appropriate response. It’s what makes the form work. In other words, posting an HTML document with form elements isn’t enough. Web applications ...