🎛️ Input Types and Attributes

One Element, Many Tools

The <input> element is the most versatile form control, and its type attribute is the dial that reshapes it. Change type and you change three things at once: the on-screen widget, the built-in validation, and — crucially on phones — the keyboard the device offers.

💡 A useful analogy: Input types are like specialized tools in a toolbox. You could tighten every screw with a plain text field, but reaching for type="email", type="number", or type="date" is like grabbing the right screwdriver — the job gets faster, the result is cleaner, and fewer mistakes slip through.

HTML5 dramatically expanded this list, moving work that once needed custom JavaScript — email checks, number spinners, date pickers — into the browser itself.

Text-Based Inputs

These all accept typed characters, but each carries semantic meaning and, in several cases, built-in validation.

<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email" required>

<label for="website">Your website</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">

Numeric Inputs

type="number"

A field for exact numbers, usually with up/down spinner controls. Constrain it with min, max, and step.

<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity"
       min="1" max="10" step="1" value="1">

type="range"

A slider for a value where the exact number matters less than the relative position.

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1" value="50">

Analogy: A number input is like typing an exact temperature into a thermostat; a range input is like sliding the dial and eyeballing "about warm enough."

Date & Time Inputs

These render native pickers so users never have to guess your preferred date format. All accept min/max to bound the selectable range.

<label for="birthday">Date of birth</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2026-12-31">

<label for="expiry">Card expiry</label>
<input type="month" id="expiry" name="card_expiry">

Selection & Special Inputs

type="checkbox" — independent toggles

Each checkbox turns on or off on its own. Use them for "select all that apply" and single opt-ins.

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to the newsletter</label>

Analogy: Checkboxes are like light switches — each flips independently of the others.

type="radio" — one from a group

Radios that share a name form a mutually exclusive group: choosing one clears the rest. Always wrap a radio group in a <fieldset> with a <legend>.

<fieldset>
  <legend>Shipping method</legend>
  <input type="radio" id="standard" name="shipping" value="standard" checked>
  <label for="standard">Standard</label>

  <input type="radio" id="express" name="shipping" value="express">
  <label for="express">Express</label>
</fieldset>

Analogy: Radio buttons are like the station presets on a car radio — pressing one pops the previously selected one out.

type="color", type="file", type="hidden"

<label for="theme">Theme color</label>
<input type="color" id="theme" name="theme_color" value="#3366ff">

<label for="avatar">Profile picture</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

<input type="hidden" name="user_id" value="12345">

Input Attributes

Beyond type, a handful of attributes appear on almost every input. Group them by what they do.

Core

• name — the key the value is submitted under (required to be submitted at all)
• id — unique DOM identifier used by labels, CSS, and JavaScript
• value — the initial or current value
• placeholder — a faint hint inside the field; never a replacement for a label

Validation

• required — the field must be filled before the form submits
• minlength / maxlength — character limits for text
• min / max — value bounds for numbers, dates, and ranges
• step — the increment for numeric and range inputs
• pattern — a regular expression the value must match

Behavior

• disabled — greyed out, not editable, and not submitted
• readonly — not editable but still submitted
• autofocus — grabs focus on page load (use once per page, sparingly)
• multiple — allows several values (email and file inputs)
• autocomplete — pre-fill hints like email or new-password

Mobile & Accessibility Payoffs

Choosing the right input type isn't just tidy — it measurably improves the experience, especially on phones, where the type determines the keyboard that pops up.

Worked Example: A Checkout Form

This condensed checkout puts several input types and validation attributes to work together. Read each field as a deliberate choice of the right tool.

<form action="/process-order" method="post">
  <fieldset>
    <legend>Contact</legend>
    <label for="name">Full name</label>
    <input type="text" id="name" name="full_name" autocomplete="name" required>

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

    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone"
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
  </fieldset>

  <fieldset>
    <legend>Payment</legend>
    <label for="card">Card number</label>
    <input type="text" id="card" name="card_number"
           inputmode="numeric" pattern="[0-9]{16}" maxlength="16" required>

    <label for="expiry">Expiry</label>
    <input type="month" id="expiry" name="card_expiry" required>

    <label for="cvv">CVV</label>
    <input type="text" id="cvv" name="cvv"
           inputmode="numeric" pattern="[0-9]{3,4}" maxlength="4" required>
  </fieldset>

  <label for="qty">Quantity</label>
  <input type="number" id="qty" name="quantity" min="1" max="10" value="1" required>

  <button type="submit">Place order</button>
</form>

Hands-on Exercise

<form action="/register" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username"
         minlength="5" maxlength="15" required>

  <label for="password">Password</label>
  <input type="password" id="password" name="password"
         minlength="8" autocomplete="new-password" required>

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

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

  <input type="checkbox" id="terms" name="terms" value="agreed" required>
  <label for="terms">I accept the terms of service</label>

  <button type="submit">Sign up</button>
</form>

Summary & Quiz

📚 Further Reading

• MDN — The <input> element
• MDN — Constraint validation
• web.dev — Learn Forms

🚀 What's Next?

You've mastered the fields. Next we broaden the toolkit beyond <input> — the form controls and labels lesson covers <select>, <textarea>, <fieldset>, <datalist>, and the labeling patterns that make forms accessible.