Forms

What you'll learn

How to build a form with text boxes, choices, a drop-down and a submit button, and how labels make it usable.

Why it matters

Logging in, searching, signing up and checking out are all forms. A good form is easy to fill in and works with a keyboard and a screen reader.

Explanation

A <form> wraps the fields. The key tags inside it:

• <label>: the visible name of a field. Link it to a field with for="id" matching the input's id. Clicking the label then focuses the field.
• <input>: a single-line field. Its type changes how it behaves: text, email, password, number, checkbox, radio, date.
• <textarea>: a multi-line text box.
• <select> with <option> items: a drop-down.
• <button type="submit">: sends the form.

Each field needs a name. The name is the key under which its value is sent to the server.

Radio buttons that share the same name form a group where only one can be chosen.

Example

Step-by-step walkthrough

1. Each <label for="..."> matches the id of its field, so clicking the label focuses the field.
2. type="email" tells the browser to expect an email address, and phones show a suitable keyboard.
3. <select> shows a drop-down of <option> items.
4. The checkbox is wrapped inside its label, which is another valid way to link them.
5. <textarea> gives space for several lines.
6. The <button type="submit"> sends the form. In this preview nothing is sent to a server.

Try it yourself

Add a group of two radio buttons with name="plan" for "Free" and "Pro", each with a label.

Build a formHTML / CSS

Editable code<form> <p> <label for="name">Your name</label><br> <input id="name" name="name" type="text"> </p> <p> <label for="level">Level</label><br> <select id="level" name="level"> <option>Beginner</option> <option>Intermediate</option> </select> </p> <button type="submit">Send</button> </form>

Run ResetCopyCtrl+Enter to run

Common mistakes

• No label. Placeholder text is not a label: it vanishes as you type.
• Missing name. The browser will not send a field that has no name.
• Radio buttons with different names, which lets the user pick all of them.
• Using <div> instead of <button> for the submit control.

Quick quiz

Summary

• A form wraps fields; each field has a name and a label.
• input types, select and textarea cover most needs.
• A button type="submit" sends it.

Next: making the browser check input for you.

<form>
  <p>
    <label for="name">Your name</label><br>
    <input id="name" name="name" type="text">
  </p>
  <p>
    <label for="email">Email</label><br>
    <input id="email" name="email" type="email">
  </p>
  <p>
    <label for="level">Level</label><br>
    <select id="level" name="level">
      <option>Beginner</option>
      <option>Intermediate</option>
    </select>
  </p>
  <p>
    <label><input type="checkbox" name="news"> Send me news</label>
  </p>
  <p>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="msg" rows="3"></textarea>
  </p>
  <button type="submit">Send</button>
</form>