Forms basics

Click the word Email next to a well-built form field and the cursor jumps into the box. That small detail is the label element doing its job.

What a form does

Search boxes, sign-up pages and checkout screens are all forms. A <form> element groups the controls, and when the visitor submits it, the browser sends each control's name together with its value to the address in the form's action attribute. The method attribute says how: get puts the data in the address, which suits searches you might bookmark, while post sends it in the body of the request, which suits anything that changes data, such as an order. HTML builds the form; a program on the server decides what to do with what arrives.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Every control needs a label

The <label> element names a control. Connect the two by giving the input an id and the label a matching for attribute, or by putting the input inside the label. The connection does two things. Screen readers read the label when the field gets focus, so the user hears Email, edit text instead of just edit text. And clicking the label focuses the field or ticks the checkbox, which gives everyone, especially people using a phone, a bigger target. A placeholder (grey hint text inside the box) is not a label: it disappears as soon as you type, it is often low in contrast, and some assistive technology ignores it.

Input types

The type attribute of <input> changes the control. text is the default single-line box. email, tel and url look similar but show a matching keyboard on phones, and the browser checks that an email address has the right shape. number accepts digits and can have min and max. password hides what you type, date offers a calendar, and checkbox and radio are boxes to tick. For longer text, use <textarea>, and for a choice from a list, <select> with <option> elements inside.

Grouping choices

Radio buttons that belong to one question share the same name, and only one of them can be chosen at a time. Wrap the group in <fieldset> and put the question in <legend>. A screen reader then reads the question along with each option: Loaf size, Small, radio button, 1 of 2. Each radio button still gets its own label.

Buttons and built-in checks

A <button> inside a form submits it by default; writing type="submit" makes that clear, and type="button" makes a button that does nothing until JavaScript gives it a job. Before sending, the browser can check fields for you. required stops the form if the field is empty, type="email" rejects text without an @, and minlength, min and max set limits. These checks help the visitor fix mistakes early, but they run in the visitor's browser and can be bypassed, so the server must check the data again. The autocomplete attribute, with values such as email or name, lets the browser fill in saved details, which saves typing for everyone and especially helps people with motor or memory difficulties.