Forms

A form is how a page collects something from the person reading it: a name, an answer, an order.

The bit everyone skips

Every input needs a <label>, and the label’s for has to match the input’s id:

<label for="name">Your name</label>
<input type="text" id="name">

Do that and clicking the label focuses the box, the tap target gets bigger on a phone, and a screen reader can announce what the box is asking for. Skip it and your form is unusable for a lot of people. It’s one attribute!

Input types

type does more than you’d think. email and number bring up different keyboards on a phone and validate the value for free. There’s also date, color, range, file and a dozen more ~ try changing one and see what happens.

Where does the data go?

Nowhere, yet. A form needs a server to receive what it collects, and a static site like this one doesn’t have one. You can build the whole form here and hook it up to a service later ~ the HTML doesn’t change.