Chapter Ten · Input and Data
Forms
How a page asks its visitor for something: what a form sends and where, the fields and labels that make it usable by everyone, the checks the browser makes for free, and a script that takes over the submit without breaking any of it.
Until now, everything on the site has travelled one way, from the page to the visitor. A form turns that round: the visitor types, chooses and sends, and the page has to receive it well. The browser does a great deal of that work without any code, from the right keyboard on a phone to a message when a required field is empty. It also leaves one job undone, receiving what was sent, and a page author who does not know that builds a form that quietly goes nowhere.
Four topics, building the site's contact form from plain HTML up. How a form works: names and values, GET and POST, and why a form needs a server. The fields themselves: input types, labels, radio groups and autocomplete. The checks the browser makes before sending, and why they are a courtesy rather than security. And a script that takes over the submit, adds its own rule, announces the result to screen readers, and tells the visitor honestly what happens to their message.
Topics in This Chapter
fieldset, autocomplete, and the site's contact form.required, types and pattern check a form before it is sent, :user-invalid styles the result kindly, and none of it is security.submit event, preventDefault, FormData, an error message a screen reader hears, and a contact form that is honest about having no server.