Input Types: Text, Email, Number, Date and the Rest

Concept

input is a single element whose type attribute changes what it becomes. Choosing the right type is one of the highest value decisions in form markup, because it buys three things at once: the correct keyboard on a phone, built in validation, and a hint to the browser about autofill.

The types worth knowing

Syntax

<label for="email">Email address</label>
<input type="email" id="email" name="email"
       required autocomplete="email" placeholder="you@example.com">

The attributes that apply to most types

number versus text

This catches people out. type="number" is for values you would do arithmetic on - a quantity, an age, a price. It is wrong for phone numbers, postal codes, card numbers and account numbers, all of which are strings of digits rather than quantities.

<!-- wrong: a postcode is not a quantity -->
<input type="number" name="postcode">

<!-- right: digits, numeric keypad, no spinner -->
<input type="text" name="postcode" inputmode="numeric" pattern="[0-9]{6}" autocomplete="postal-code">

The problems with type="number" on such fields are real: a leading zero is stripped, a scroll wheel over the field silently changes the value, and the spinner arrows are meaningless on an identifier.

inputmode

inputmode chooses the on screen keyboard without changing validation or the value type. It is the right tool when you want the keypad but not the number semantics.

<input type="text" inputmode="numeric">   <!-- digits only -->
<input type="text" inputmode="decimal">   <!-- digits and a decimal point -->
<input type="text" inputmode="tel">       <!-- phone keypad -->
<input type="text" inputmode="email">     <!-- at sign visible -->
<input type="text" inputmode="search">    <!-- Go key becomes Search -->

autocomplete

Under used and genuinely valuable. It lets the browser fill a form correctly instead of guessing, which for many readers is the difference between finishing a form and abandoning it. The Web Content Accessibility Guidelines require it for fields collecting personal data.

<input autocomplete="name">
<input autocomplete="given-name">
<input autocomplete="family-name">
<input autocomplete="email">
<input autocomplete="tel">
<input autocomplete="street-address">
<input autocomplete="postal-code">
<input autocomplete="cc-number">
<input autocomplete="current-password">
<input autocomplete="new-password">
<input autocomplete="one-time-code">

current-password and new-password are worth using precisely: they tell a password manager whether to offer a saved password or to generate a new one.

Placeholder is not a label

The most common accessibility failure in forms. A placeholder disappears the moment the reader types, so anyone who loses their place has no way to recover what the field was for. It is also low contrast by default, and some screen readers ignore it entirely.

<!-- broken: no label at all -->
<input type="text" placeholder="Full name">

<!-- correct: a label, and a placeholder that adds something -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="As printed on your identity card">

Example: a realistic set of fields

<p>
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" required autocomplete="name">
</p>

<p>
  <label for="dob">Date of birth</label>
  <input type="date" id="dob" name="dob" max="2010-12-31" required>
</p>

<p>
  <label for="phone">Mobile number</label>
  <input type="tel" id="phone" name="phone" inputmode="tel"
         autocomplete="tel" pattern="[0-9]{10}">
  <small id="phone-hint">Ten digits, no spaces</small>
</p>

<p>
  <label for="quantity">Number of copies</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
</p>

Important rules

• An unrecognised type falls back to text, so new types are safe to use.
• input is a void element and is inline by default.
• Date and time values are always exchanged in ISO format regardless of how the picker displays them.
• type="number" returns an empty string when the value is invalid, not the partial text.
• Native date and colour pickers look different in every browser and cannot be styled.
• autofocus should appear at most once per page.

Common mistakes

• Using type="text" for everything and losing keyboards, validation and autofill.
• Using type="number" for phone numbers, postcodes or card numbers.
• Using a placeholder instead of a label.
• Omitting autocomplete, so the browser cannot help.
• Setting maxlength too tight for real data - names, addresses and email addresses are longer than you think.
• Using autofocus on a page where the form is below the fold, which scrolls the reader past your content.

Best practices

• Pick the most specific type that fits.
• Add autocomplete to every field that collects personal data.
• Use inputmode when you want a keyboard without number semantics.
• Give every field a real, visible label.
• Put format hints in a small element bound with aria-describedby, not in the placeholder.
• Test on a real phone. The keyboard that appears is immediate feedback on whether the type is right.

Practice

1. Build a form with eight different input types and open it on a phone. Note the keyboard for each.
2. Take a form using type="text" everywhere and upgrade each field to a specific type.
3. Try entering a leading zero into a type="number" field and explain what happens.
4. Add autocomplete to an address form and test the browser autofill.