Input Types

Learning objectives#

• Pick the correct input type for each kind of data
• Use number, range and date inputs with min, max and step
• Accept files with type="file"
• Know when to use type="hidden"

Explanation#

type="email", "url" and "tel" show a matching keyboard on phones (an @ key, a .com key, a number pad). email and url are also validated automatically.

type="number" and "range" accept numbers; min, max and step set the limits. range shows a slider.

type="date", "time" and "datetime-local" give a built-in picker and send a standard format like 2026-10-28.

type="file" lets users choose files; add accept="image/*" to filter and multiple to allow several. The form needs enctype="multipart/form-data" to upload them.

type="hidden" sends a value the user does not see, such as a product ID. Never trust it — users can still change it with DevTools.

Code example: An input-type showcase#

1<style> label { display:block; margin:8px 0; font-family:sans-serif; } </style>
2<form>
3  <label>Email <input type="email" name="email"></label>
4  <label>Phone <input type="tel" name="phone" placeholder="98765 43210"></label>
5  <label>Website <input type="url" name="site"></label>
6  <label>Quantity <input type="number" name="qty" min="1" max="10" value="1"></label>
7  <label>Volume <input type="range" name="vol" min="0" max="100" step="10"></label>
8  <label>Birthday <input type="date" name="dob"></label>
9  <label>Favourite colour <input type="color" name="color" value="#2965f1"></label>
10  <label>Photo <input type="file" name="photo" accept="image/*"></label>
11  <label>Search <input type="search" name="q"></label>
12  <input type="hidden" name="source" value="newsletter">
13  <button>Submit</button>
14</form>

A form with an email box, phone box, URL box, a number spinner, a slider, a date picker, a colour picker, a file chooser and a search box.

Step-by-step explanation#

1. type="email" rejects text without an @ on submit.
2. type="tel" shows a number keypad on phones but does not validate (phone formats vary worldwide).
3. number with min/max/value starts at 1 and refuses 0 or 11.
4. range shows a slider moving in steps of 10.
5. date and color open native pickers.
6. file with accept="image/*" filters the file chooser to images.
7. hidden sends source=newsletter without showing anything.

Real-world use case#

Common mistakes#

Best practices#

• Use the most specific input type available
• Add autocomplete values (email, tel, postal-code)
• Use inputmode for numeric text that is not a quantity
• Always set min/max for number and date inputs where limits exist

Remember this#

Practice exercise#

1<form>
2  <label>Check-in <input type="date" name="checkin" required></label>
3  <label>Check-out <input type="date" name="checkout" required></label>
4  <label>Guests <input type="number" name="guests" min="1" max="6" value="2"></label>
5  <label>Email <input type="email" name="email" autocomplete="email" required></label>
6  <button>Book</button>
7</form>

Mini quiz#

Want more? Practise all HTML MCQs · HTML interview questions

Related topics#

My notes#

Saved in this browser.