Sign-up Form

What this page does

1. It asks six questions, in six different kinds of box.
2. Leave the name empty and click Join the club. The browser stops you and points at the box.
3. Type hello in the email box and try again. It stops you again.

Every box needs a label

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

The label's for must match the input's id. Those two words are what tie them together. Get them matching and clicking the words puts the cursor in the box. Try it on the page.

There is a second way. Put the input inside the label and you need no id at all. The checkbox on the page is written that way. Both are correct. Use whichever keeps the code readable.

<label>
    <input type="checkbox" name="laptop">
    I can bring a laptop
</label>

The kinds of box

One type word changes what an <input> does, what a phone keyboard shows, and what the browser checks.

Two tags are not <input> at all. <select> is a drop-down, and each choice inside it is one <option>. <textarea> is a box for several lines, and it is the only one of these with a closing tag.

<select id="level" name="level">
    <option value="none">None yet</option>
    <option value="some" selected>A little</option>
    <option value="lots">Quite a lot</option>
</select>

Radio buttons share a name

<input type="radio" name="day" value="tuesday">
<input type="radio" name="day" value="thursday" checked>
<input type="radio" name="day" value="either">

All three say name="day". That shared name is what makes them one group, so choosing one clears the others. Give them different names and all three can be on at once, which is not what a radio button is for.

value is what gets sent. The words a person reads live in the label beside the box. The two are allowed to be different, and usually should be: value="thursday" is easy for code to work with, and Thursday is what the person needs to read.

<fieldset> draws a box around a set of related questions and <legend> names the group. A label names one box. A legend names the whole question.

Showing where the cursor is

Press Tab through the form. A ring follows you from box to box. That ring is the only way somebody using a keyboard can tell where they are.

.field:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #dbeafe;
}

• :focus-visible is a pseudo-class, like :hover. :hover is the box you point at. :focus-visible is the box you are typing in.
• The border also gets thicker and darker, not just bluer. Somebody who cannot tell blue from grey still sees the change.
• outline: none on its own is one of the most common accessibility mistakes on the web. It is only safe here because the next two lines draw a replacement.

Build it step by step

One box at a time, and reload after each one. A form is long but it is the same three lines over and over.

1. 1

   Make the page and the form

   Start a new index.html with ! and Tab. Inside <body>, add a <form> with an <h1> in it. A form is just a box, so it takes any rule a div would.

2. 2

   Add one labelled box

   Add a <label for="name"> and an <input type="text" id="name" name="name">. Reload. Click the words and check the cursor lands in the box. If it does not, for and id do not match.

3. 3

   Make it required

   Add the word required to the input, and add a <button type="submit"> at the bottom. Click the button with the box empty. The browser stops you.

4. 4

   Add the other kinds

   Add an email input, a number input, a select with three options, and a textarea. Give every one a label. Reload after each.

5. 5

   Add the radio group

   Add three radio inputs that all share name="day". Wrap them in a <fieldset> with a <legend>. Click each one and check that choosing one clears the others.

6. 6

   Style the boxes as one

   Make index.css. Write one .field rule and put class="field" on every input, the select and the textarea. They all look the same from one rule.

   .field {
       box-sizing: border-box;
       width: 100%;
       padding: 0.5rem 0.6rem;
       font: inherit;
       border: 2px solid #cfd6e0;
       border-radius: 0.5rem;
   }

7. 7

   Show where the cursor is

   Add the .field:focus-visible rule. Tab through the form and watch the ring move.