Forms & Inputs

Forms collect input

<form>
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Ada Lovelace" required />

  <label for="level">Experience</label>
  <select id="level">
    <option>Total beginner</option>
    <option>Some experience</option>
  </select>

  <label>
    <input type="checkbox" /> Email me new lessons
  </label>

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

Input types do work for you

Type	You get
email	format check + email keyboard on phones
password	hidden characters
number	number keyboard, min/max
date	a date picker
checkbox / radio	yes/no and pick-one options

Labels aren't optional

Every input needs a <label>. Clicking the label focuses the input (bigger tap target on phones), and screen readers read it out. Placeholder text is not a label: it disappears when you type.

Built-in validation

required, minlength, min, max and type make the browser check input before submitting, for free. You'll add JavaScript checks later, and the server must always check again, because users can bypass anything in the browser.