Control types

Types of <input>

A single <input> transforms based on its type. Picking the right one isn't fussy detail: on mobile, a type="email" pops up the keyboard with @ ready to go, and a type="number" brings up the numeric keypad. Your users will thank you. The most common ones:

<input type="text" />      <!-- single-line text -->
<input type="email" />     <!-- email (appropriate keyboard and validation) -->
<input type="password" />  <!-- hides what is typed -->
<input type="number" />    <!-- numeric, with min/max -->
<input type="checkbox" />  <!-- independent checkbox (yes/no) -->
<input type="radio" />     <!-- exclusive option within a group -->

Checkboxes (checkbox): each one lives its own life; they're that "I accept the terms" that's toggled on or off.

Radios (radio): they form a group when they share the same name. That's the trick: the shared name is what makes selecting one clear the rest. The user can only keep one option from the group (like choosing a subscription plan):

<input type="radio" name="plan" id="plan-free" value="free" />
<label for="plan-free">Free</label>
<input type="radio" name="plan" id="plan-pro" value="pro" />
<label for="plan-pro">Pro</label>

Long text: <textarea>

For multiple lines (a comment, a description) you use <textarea>, which does have a closing tag:

<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>

Drop-down lists: <select> and <option>

<select> shows a list of options; each option is an <option>:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="es">Spain</option>
  <option value="mx">Mexico</option>
  <option value="ar">Argentina</option>
</select>

Buttons: <button>

The type attribute of the <button> changes its behavior:

• type="submit" (the default value inside a <form>): submits the form.
• type="button": a normal button that does not submit anything (you control it with JavaScript).

<button type="submit">Send</button>
<button type="button">Cancel</button>

⚠️ CLASSIC TRAP: a <button> with no type inside a <form> behaves like submit. That's why the "Cancel" button you added sometimes submits the form by accident. Always set the type and sleep easy.