Frontend Development › HTML

Input Types

email, number, date and others, with the keyboards and validation they bring.

Also known as: HTML input types, input type attribute, email input, date input

The type attribute of an <input> decides what kind of field it is. Choosing the right type gives you better keyboards on phones, built-in validation and often a better user interface.

<input type="text" name="name">
<input type="email" name="email" required>
<input type="password" name="password" minlength="8">
<input type="number" name="qty" min="1" max="10" step="1">
<input type="date" name="birthday">
<input type="tel" name="phone">
<input type="url" name="website">
<input type="search" name="q">
<input type="checkbox" name="newsletter">
<input type="radio" name="plan" value="pro">
<input type="file" name="avatar" accept="image/*">
<input type="range" name="volume" min="0" max="100">
<input type="color" name="theme">
<input type="hidden" name="csrf_token" value="...">

What you get

Combine with attributes

required, min, max, minlength, pattern, autocomplete and inputmode refine behavior (form validation). autocomplete="email" or "one-time-code" helps browsers and password managers.

Cautions

• Types give hints, not security. type="number" doesn’t stop someone sending text directly. Validate on the server (never trust the client).
• number isn’t right for everything. IDs, phone numbers, card numbers and postal codes shouldn’t be numbers (leading zeros, spinners, scroll-wheel changes). Use type="text" with inputmode="numeric".
• email validation is lenient. A passing value may not be a real address.
• Date pickers look different between browsers, so test them.
• Always pair inputs with a <label> (accessible forms).
• The submitted value is always a string, whatever the type.