HTML Input Types: text, email, number, date, checkbox and More

What you will learn

The type attribute is what turns a plain <input> into a text box, a password field, a date picker, a checkbox, or a dozen other things — and choosing the right type does real work for you: built-in validation, the correct mobile keyboard, and a proper native picker, all without writing a line of JavaScript. In this lesson you will go through the input types you’ll actually use, with the attributes that matter for each.

Text-based inputs

text — plain text

<input type="text" name="fullName">

The default, general-purpose text box. Use it for names, addresses, or anything without a more specific type below.

email — an email address

<input type="email" name="email">

• On mobile, shows a keyboard with @ and .com shortcuts front and centre.
• The browser automatically checks the value looks like a real email address format (something@something.something) before letting the form submit — no JavaScript needed.
• Add multiple to accept a comma-separated list of several addresses: <input type="email" name="cc" multiple>.

password — a hidden text field

<input type="password" name="password" minlength="8">

Displays dots or asterisks instead of the typed characters. It hides the text visually only — this is not encryption. The actual security of a password still depends entirely on how your server stores and transmits it, which is beyond HTML.

tel — a phone number

<input type="tel" name="phone" placeholder="+91 98765 43210">

Shows a numeric phone keypad on mobile. Unlike number, it does not restrict what characters can be typed (phone numbers often include +, spaces, and brackets), so pair it with a pattern (covered in the validation lesson) if you need to enforce a specific format.

url — a web address

<input type="url" name="website" placeholder="https://example.com">

Checks that the value looks like a valid URL, and shows a .com// shortcut keyboard on mobile.

search — a search box

<input type="search" name="q">

Behaves like text, but many browsers add a small “×” clear button inside the field automatically, and mobile keyboards may show “Search” instead of “Enter” on the return key.

Numeric and date/time inputs

number — numeric input with a stepper

<input type="number" name="quantity" min="1" max="10" step="1" value="1">

• min / max set the allowed range.
• step sets the increment the up/down arrows move by (and what counts as a “valid” value — step="1" rejects 4.5).
• Shows a numeric keypad on mobile and small increment/decrement arrows on desktop.

Careful: type="number" is for values you’d actually do maths with — a quantity, an age. For things that merely look like numbers but aren’t (a phone number, a PIN code, a credit card number), use type="tel" or type="text" instead — number can mangle leading zeros and adds unwanted up/down arrows to something like a postal code.

date, month, week, time, datetime-local

<input type="date" name="dob" min="1900-01-01" max="2026-09-29">
<input type="time" name="appointment">
<input type="month" name="cardExpiry">

These render the browser’s native picker — a calendar for date, a clock/scroller for time — automatically, with zero JavaScript. min/max restrict the allowed range (handy for a date-of-birth field that shouldn’t allow future dates, or a booking form that shouldn’t allow past ones).

range — a slider

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50">

A slider control for picking a number when the exact figure matters less than the general feel — volume, brightness, a price-range filter. min, max and step work the same as on number. One thing to know: the slider by itself shows no number on screen — if the visitor needs to see the exact value, you pair it with an <output> element and a little JavaScript, which you’ll cover properly in the JavaScript course.

Choice inputs

checkbox — independent on/off choices

<label><input type="checkbox" name="subscribe" checked> Subscribe to newsletter</label>
<label><input type="checkbox" name="terms" required> I agree to the terms</label>

Each checkbox is independent — checking one has no effect on the others. Use checkboxes when the visitor can select any number of options, including zero or all of them.

• checked — pre-selects the box (boolean attribute).
• Submitted data: a checked box sends name=on (or name=<value> if you set one) — an unchecked box sends nothing at all, not name=off. Keep this in mind when reading submitted form data later on.

For a group of related checkboxes (like “select all that apply”), give them all the same name, ending in [] if your backend expects an array — but each needs its own distinct value:

<p>Which languages do you know?</p>
<label><input type="checkbox" name="languages[]" value="html"> HTML</label>
<label><input type="checkbox" name="languages[]" value="css"> CSS</label>
<label><input type="checkbox" name="languages[]" value="js"> JavaScript</label>

radio — pick exactly one from a group

<p>Preferred contact method:</p>
<label><input type="radio" name="contact" value="email" checked> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
<label><input type="radio" name="contact" value="whatsapp"> WhatsApp</label>

Unlike checkboxes, radio buttons work as a mutually exclusive group — selecting one automatically deselects the others in the same group. What makes them a “group” is sharing the exact same name. This is the single most common radio-button mistake:

<!-- Wrong: different names mean these are NOT grouped together -->
<!-- both could end up checked at once -->
<input type="radio" name="contactEmail" value="email"> Email
<input type="radio" name="contactPhone" value="phone"> Phone

<!-- Right: same name groups them, so only one can be selected -->
<input type="radio" name="contact" value="email"> Email
<input type="radio" name="contact" value="phone"> Phone

Every radio button in a group must also have its own distinct value — that’s what gets submitted to identify which one was chosen.

file — uploading a file

<label for="resume">Upload your resume</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">

• accept hints which file types the picker should show/allow — a comma-separated list of extensions (.pdf,.jpg) or MIME types (image/* for any image, application/pdf).
• Add multiple to allow selecting more than one file at once: <input type="file" name="photos" accept="image/*" multiple>.
• Note that accept is only a hint to the file picker UI — it does not guarantee the uploaded file truly matches, so a server must always re-check the file type itself before trusting it.

Colour and hidden values

color — a colour picker

<input type="color" name="favoriteColor" value="#ff6347">

Opens the operating system’s native colour picker and always submits a value in #rrggbb hex format.

hidden — invisible data, still submitted

<input type="hidden" name="formVersion" value="2">

Not shown to the visitor at all, but is submitted along with the rest of the form. Used to carry small pieces of data your page already knows (like an ID or a version number) that don’t need to be edited by the visitor.

Quick reference table

Type	Use for
text	General text, names
email	Email addresses
password	Hidden text entry
tel	Phone numbers
url	Web addresses
search	Search boxes
number	Actual numeric values you’d calculate with
date / time / month	Dates and times, with a native picker
range	A slider when the exact number matters less
checkbox	Any number of independent choices
radio	Exactly one choice from a group
file	File uploads
color	Colour selection
hidden	Invisible data still sent with the form

Common mistakes

• Using type="number" for things that aren’t really numbers — phone numbers, PIN codes, postal codes. Use text or tel instead.
• Giving grouped radio buttons different name values. They must share the exact same name to behave as a mutually exclusive group.
• Forgetting a value on radio buttons or grouped checkboxes. Without it, the server can’t tell which option was actually selected.
• Assuming an unchecked checkbox submits name=off. It submits nothing at all for that field.
• Trusting accept on <input type="file"> as real validation. It’s only a UI hint — a server must independently verify the uploaded file.
• Forgetting multiple when several files or emails should be allowed.

Interview-style questions

What makes a group of radio buttons behave as a group? Sharing the exact same name attribute — this is what makes selecting one automatically deselect the others in that group.

What value does an unchecked checkbox submit? None at all — the field is simply absent from the submitted data, not sent as off or false.

Why might type="tel" be preferred over type="number" for a phone number field? Phone numbers often include characters like +, spaces or brackets that number would reject, and phone numbers aren’t used for arithmetic, so tel (paired with a pattern for format validation) is the better fit.

What does the accept attribute on a file input actually guarantee? Very little on its own — it’s a hint that filters what the file picker shows, but a server must always independently verify the uploaded file’s real type.

Practice

1. Use the Practice in Editor button. Change the min/max on the age field, and try entering a value outside that range to see the browser’s built-in warning.

2. Add a group of checkboxes for “Which subjects do you like?” with at least three options, using a shared name ending in [].

3. Add an <output> next to the range slider (you don’t need it to update live yet — just add the element) and think about why a plain range input alone doesn’t show its number.

4. Fix this code (it has two mistakes: mismatched radio name values, and missing value attributes):

   <input type="radio" name="planMonthly"> Monthly
   <input type="radio" name="planYearly"> Yearly

Recap

• Choosing the right type gives you a better mobile keyboard, a native picker, and built-in validation for free.
• number/date/range accept min, max and step to constrain the value.
• Checkboxes are independent; an unchecked one submits nothing. Radio buttons need a shared name to form a mutually exclusive group, and each needs its own value.
• file accepts accept (a hint, not real validation) and multiple for several files.
• hidden carries invisible data that’s still submitted with the rest of the form.