Labels and buttons

A usable form explains each control and gives buttons predictable actions. It should work with mouse, touch and keyboard input.

Give each control a name

<label for="reader-name">Name</label>
<input id="reader-name" name="readerName" type="text">

for matches id, not name. Clicking Name normally focuses the input; assistive technology can use the same association. If for becomes readerName while id stays reader-name, the connection breaks.

Keep ids unique within a document. When copying a control, update both its id and the associated label. A label can also wrap a control; this course favors explicit for/id pairs for easy checking.

placeholder disappears during typing and may have faint default text. Use it for an example format, not as the sole field name. Put Email in a visible label and [email protected] in placeholder. Keep requirements such as a guest limit visible too.

Specify button behavior

button contents are its visible text. type determines its default behavior:

<button type="submit">Submit registration</button>
<button type="reset">Restore defaults</button>
<button type="button">Ordinary button</button>

submit requests submission. reset restores initial values, which are not necessarily empty. button has no default submission action; JavaScript can give it behavior later. In an ordinary form, omitting type usually makes a button a submit button, even if its text says Help.

Reset buttons can discard entered work, so use them carefully in actual products. Here they demonstrate initial values. In the Lab, click labels, use Tab, compare the broken association and repair it. Change the name, then restore it to Lin. The ordinary button does not open anything without additional behavior; that is expected.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <form action="/register" method="post">
    <p><label for="reader-name">Name (click this label)</label>
    <input id="reader-name" name="readerName" type="text" value="Lin" required></p>
    <button type="submit">Check entries</button>
    <button type="reset">Restore defaults</button>
    <button type="button">Ordinary button</button>
  </form>
</body>
</html>