HTML Input Types and Labels

The <input> element is the most versatile form control in HTML, and its behavior changes entirely based on its type attribute. Choosing the right input type is not cosmetic — it changes the on-screen keyboard shown on mobile devices, enables built-in validation, and improves accessibility.

Why it matters

Choosing the right input type gives you a great deal for free: a phone shows a numeric keypad for tel and an @ key for email, a date field opens a calendar, and the browser checks the format. A label tied to its input is the single most important thing for form accessibility, and its absence is one of the most common faults found in audits.

Common Input Types

HTML defines many input types beyond the generic text box, each tailored to a specific kind of data.

• text — a single-line free text field.
• email — validates a basic email address pattern and shows an email-optimized mobile keyboard.
• password — masks entered characters.
• number — accepts only numeric input, often paired with step, min, and max.
• checkbox — an independent on/off toggle; multiple checkboxes with the same name can all be checked at once.
• radio — one selection from a mutually exclusive group; radios sharing the same name attribute form a single group.
• date, tel, url, search, file — specialized inputs for dates, phone numbers, URLs, search queries, and file uploads.

Associating Labels with Inputs

Every input needs an associated <label> to be usable and accessible. The most reliable way is connecting a label's for attribute to the input's id — this lets clicking the label text focus (or toggle) the input, and lets screen readers announce the label when the input receives focus. Wrapping the input directly inside the label element is a valid alternative that doesn't require matching id/for values.

Example

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

<label for="age">Age</label>
<input type="number" id="age" name="age" min="1" max="120">

<fieldset>
  <legend>Preferred Contact Method</legend>
  <label><input type="radio" name="contact" value="email" checked> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Renders an email field with an email-style mobile keyboard, a number field restricted between 1 and 120, and a radio button group where selecting one option automatically deselects the other.

Exercise

Add four labelled controls to the form: an email field named email; a number field named age that accepts 18 to 99; a checkbox named newsletter with the label Send me news; and two radio buttons named plan with the values free and pro.

Expected result: four labelled controls; only one of the two radio buttons can be selected at a time.

<form>
  <!-- TODO: email -->
  <!-- TODO: age, 18 to 99 -->
  <!-- TODO: newsletter checkbox -->
  <!-- TODO: plan radio buttons: free and pro -->
</form>

<form>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
  </p>
  <p>
    <label for="age">Age</label>
    <input type="number" id="age" name="age" min="18" max="99">
  </p>
  <p>
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="newsletter">Send me news</label>
  </p>
  <p>
    <input type="radio" id="plan-free" name="plan" value="free">
    <label for="plan-free">Free</label>
    <input type="radio" id="plan-pro" name="plan" value="pro">
    <label for="plan-pro">Pro</label>
  </p>
</form>

Quick quiz

Interview questions