Forms: input, label, select, textarea, button

Build complete, accessible, production-ready forms.

10 min · 3 questions

A form is the gateway to almost every interaction on the web: sign-ups, search, checkout, contact. You already know how a page is structured; now it's time to get practical. Start by memorizing the golden rule: every field has a name attribute, because that is what gets sent to the server, not the id.

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Sign up</button>
</form>

Look at the label / input pair: the label's for attribute points to the field's id. This link is essential for screen readers. Also note the type="email": the browser validates the format for free and shows the right keyboard on mobile. Other types come in handy every day: number, date, password, checkbox, radio.

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">-- Choose a country --</option>
  <option value="fr">France</option>
  <option value="ca">Canada</option>
</select>

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>

The last player: button. It accepts three types: submit (sends the form), reset (clears the fields) and button (does nothing on its own - wire it up with JavaScript). Mental exercise: in a blog post form, you add a "Preview" button that must not send the data. Which type do you give it? Answer: type="button".

<form action="/contact" method="post">
  <label for="topic">Subject</label>
  <select id="topic" name="topic">
    <option value="support">Technical support</option>
    <option value="billing">Billing</option>
  </select>

  <button type="submit">Send</button>
  <button type="button" id="preview-btn">
    Preview
  </button>
</form>

Knowledge check

Make sure you remember the key points of this lesson.

1. Which attribute links a label to its form field?
   • The label's for attribute, which points to the field's id
   • The name attribute, identical on the label and the field
   • The label's value attribute
   • The field's placeholder attribute
2. Inside a form, what is the default type of a button without a type attribute?
   • submit
   • button
   • reset
3. Which element do you use to enter long, multi-line text?
   • input with type="text"
   • textarea
   • select
   • output