CSE 134B Web Client Languages
  1. Interaction
  2. Forms

Interaction · Layer 3

Forms

A form is the web's second-oldest interaction and still its most important one: it is how people sign up, buy, report, apply and ask. Built well in HTML, a form works with no script, is easy to fill in on any device, and asks only for what it needs. Built badly, no amount of JavaScript later will rescue it.

How these pages build forms

Every example in this section follows the same rules, and the pages explain why as they go:

  • Every control has a <label>, explicit with for and id, and every control that sends data has a name.
  • Related controls are grouped in a <fieldset> with a <legend> that asks the question.
  • Messages go in <output>, tied to their control with for and aria-describedby: class="hint" for help, class="error" for problems.
  • A <form-field> element holds each label, control and message, instead of a stack of <div> elements, with a <br> so it reads well even with no CSS.
  • Client-side checks serve the person filling in the form. They are never security; the server checks everything again.
  • The form works before any script runs. JavaScript improves it later; it does not hold it up.

Demo forms post to /api/echo, which sends back exactly the request it received, so you can see what a form really sends.

The pages

  1. 01The form and its request

    The pieces of a form, the submission lifecycle, what gets sent and what does not, GET and POST, and the buttons that change where a form goes.

  2. 02Form Fields

    Every control, from text boxes to file pickers, what each one is for, and exactly what each one sends.

  3. 03Organizing Forms

    Labels and the accessible name, fieldsets for real groups, output for hints and errors, the form-field pattern, order and layout, and long forms in sections and steps.

  4. 04Form Accessibility and Usability

    Constraints that help instead of hinder, error messages that say what to do, mobile keyboards, autofill, and the checks every form should pass.

  5. 05Form Security

    Why every client-side check can be removed, what the server must do instead, HTTPS, passwords, bots and automated agents.

  6. 06Forms for People

    What to collect and what not to, names, addresses and money across the world, privacy and the law, and where JavaScript takes forms next.

Films

  • Form Processing: HTML Markup to HTTP Request, beside page 01: how a form's attributes and fields become its request.
  • Easy and Accessible Forms (9 min), beside pages 03 and 04: one sign-up filled in twice on a phone, with labels, the right keyboards, autofill and errors that help.
  • Real World Forms (8 min), beside pages 05 and 06: one checkout meets DevTools, curl, bots and agents, customers around the world, and the rules about what a form may collect.