6 min read
Input Types
Prerequisites: Forms: the basics
The type attribute changes what an input accepts, how it looks, and
which keyboard phones show.
<form action="/profile" method="post">
<p><label for="f-email">Email</label>
<input id="f-email" name="email" type="email"></p>
<p><label for="f-url">Website</label>
<input id="f-url" name="website" type="url"></p>
<p><label for="f-tel">Phone</label>
<input id="f-tel" name="phone" type="tel"></p>
<p><label for="f-age">Age</label>
<input id="f-age" name="age" type="number" min="0" max="130"></p>
<p><label for="f-born">Date of birth</label>
<input id="f-born" name="born" type="date"></p>
<p><label for="f-time">Preferred call time</label>
<input id="f-time" name="call_time" type="time"></p>
<p><label for="f-vol">Volume</label>
<input id="f-vol" name="volume" type="range" min="0" max="10" step="1" value="5"></p>
<p><label for="f-color">Favorite color</label>
<input id="f-color" name="color" type="color" value="#3366ff"></p>
<p><label for="f-avatar">Profile picture</label>
<input id="f-avatar" name="avatar" type="file" accept="image/png, image/jpeg"></p>
<p><button>Save</button></p>
</form>
| Type | What you get |
|---|---|
text |
Plain single-line text (the default) |
email |
Checks for an email-like value; @ keyboard on phones |
url |
Checks for an absolute URL |
tel |
Phone keypad on phones — no format check, because formats vary by country |
number |
Numeric value with up/down buttons; min, max, step |
date, time, datetime-local, month, week |
Native date/time pickers |
range |
A slider — only for values where precision doesn't matter |
color |
A color picker; the value is a hex code like #3366ff |
file |
A file chooser; accept filters types, multiple allows several |
password |
Hidden characters |
search |
Text box for searching (may show a clear button) |
hidden |
Not shown; carries a value like an ID or token |
checkbox, radio |
Choices — next lesson |
Things to know
- A number isn't always a
number. Credit-card numbers, postcodes, and PINs aren't quantities — the arrows and scroll-wheel changes make no sense, and leading zeros can be lost. Usetype="text"withinputmode="numeric"(numeric keyboard on phones) instead. - The value of a date input is always
YYYY-MM-DD, whatever format the visitor sees on screen. - Forms with
type="file"must usemethod="post"andenctype="multipart/form-data", or only the file name is sent. - Unknown types fall back to
text, so newer types are safe to use.
inputmode and autocomplete
<label for="otp">One-time code</label>
<input id="otp" name="otp" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6">
inputmode picks the on-screen keyboard without changing validation.
autocomplete tells the browser what the field is (name, email,
street-address, postal-code, cc-number, new-password, ...) so it
can fill it in — a huge help on phones.
Practice
Write a file-upload form that posts to /upload and accepts several
PDF files.
Show solution
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="docs">Documents (PDF)</label>
<input id="docs" name="docs" type="file" accept="application/pdf" multiple>
<button>Upload</button>
</form>