Stop 02 · HTML5Topics · 3/12

Input types

In short

Change one word, type="email", and phones show the @ keyboard, browsers check the format and you write zero JavaScript. Picking the right input type is free UX.

HTML5 input types (`email`, `date`, `number`, `tel`, `url`, `range`, etc.) give browsers built-in validation and mobile-friendly keyboards for free. Choosing the correct type improves usability and validation while helping browsers provide better controls and keyboards, especially on mobile devices.

The jaadu mascot at a kirana counter uses a scale for rice, a jug for milk and a scoop for lentils.

Think of it like this

The right counter at the kirana store

You don't weigh rice on the milk counter. Each item has its own tool. Input types are the same: a date picker for dates, a number pad for phone numbers, a slider for ranges. The right tool makes the job easy.

Watch it happen

One attribute, different keyboards

You

Input

Phone keyboard

tap type="email"

1/6You tap the email field on your phone.

The big ideas

What you need to know

Better mobile keyboards

type="tel" shows a number pad, type="email" adds the @ key, type="url" adds .com and slash keys.

Built-in pickers

date, time, color and file give you native pickers that already work with keyboard and touch.

number vs tel

Use number for quantities you add up. Phone numbers, PIN codes and OTPs aren't maths, so use tel or text with inputmode="numeric".

Unknown types fall back

If a browser doesn't support a type, it shows a plain text box. Nothing breaks.

See it in code

Walk through the code

html

1<input type="email" name="email" autocomplete="email" />2<input type="tel" name="phone" autocomplete="tel" />3<input type="password" name="pwd" autocomplete="new-password" />4<input type="date" name="dob" min="1990-01-01" />5<input type="number" name="tickets" min="1" max="6" step="1" />6<input type="range" name="budget" min="0" max="5000" step="500" />7<input type="color" name="theme" value="#f97316" />8<input type="file" name="resume" accept=".pdf" />9<input type="text" name="otp" inputmode="numeric" maxlength="6"10       autocomplete="one-time-code" />

1/4email and tel change the mobile keyboard. autocomplete lets the browser fill in saved details.

autocomplete hints let the browser fill saved details. one-time-code lets many phones suggest the OTP from your SMS.

Save yourself the pain

Common mistakes

Oops

Using type="number" for a phone number or OTP.

Do this instead

Number inputs drop leading zeros and show up/down arrows. Use type="tel" or inputmode="numeric".

Oops

Building a custom date picker from scratch on day one.

Do this instead

Start with type="date". It's accessible and mobile friendly. Go custom only if the design truly needs it.

Your mission

Input type zoo

~15 min

Quick check

Which input is the best fit for a 6-digit OTP field?

Go deeper

1Try every input type in a sandbox and see the different mobile keyboards they trigger. Inspect the result in DevTools or the console and explain what you observed.
2Learn `placeholder`, `min`, `max` and `pattern` attributes. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Compare `type="text"` vs a more specific type for the same field.