📝 Phase 5 · Forms🟢 BeginnerModule 06

Input Types

⏱ 22 min read📖 4 sections🧩 5-question quiz

Course Progress54% complete

Changing one attribute — type — transforms a plain text box into a date picker, color swatch, slider, file chooser, or star-rating input. HTML5 introduced over 20 input types that get the browser's native UI for free, with built-in validation, mobile keyboard switching, and accessibility baked in.

Section 1

Text-Based Inputs

These are the most common. Each type changes validation behaviour and, on mobile, the keyboard that appears.

type="text"

General single-line text. The default when type is omitted.

type="email"

Validates email format. Shows @ keyboard on mobile.

type="password"

Masks typed characters. Never sent in URL query strings.

type="search"

Like text but may show a clear (×) button. Search keyboard on mobile.

type="url"

Validates URL format (must start with http:// etc.).

type="tel"

No format validation — but shows numeric pad on mobile.

HTMLText-based input examples

<input type="text"     name="username"  placeholder="Username">
<input type="email"    name="email"     placeholder="you@example.com">
<input type="password" name="password"  minlength="8">
<input type="url"      name="website"   placeholder="https://">
<input type="tel"      name="phone"     placeholder="+1 555 0100">

Section 2

Number, Date & Time Inputs

type="number"

Numeric spinner. Use min, max, step attributes.

type="range"

Slider. Use min, max, step, value.

type="date"

Date picker (YYYY-MM-DD format submitted).

type="time"

Time picker (HH:MM format submitted).

type="datetime-local"

Combined date + time picker, no timezone.

type="month"

Year + month picker (YYYY-MM submitted).

HTMLNumber and date inputs

<input type="number" name="qty" min="1" max="99" step="1" value="1">
<input type="range"  name="volume" min="0" max="100" step="5">
<input type="date"   name="dob"   min="1900-01-01" max="2025-12-31">
<input type="time"   name="start" min="09:00" max="17:00">

Section 3

Choice & Special Inputs

type="checkbox"

Toggle on/off. Submitted only when checked.

I agree to terms

type="radio"

Select one from a group sharing the same name.

Free Pro

type="file"

File picker. Use accept to filter file types.

type="color"

Color picker. Submits a hex value (#rrggbb).

type="hidden"

Invisible to user. Submits a value silently (e.g. CSRF token).

<input type="hidden" name="token" value="abc123">

type="submit"

Renders as a button that submits the form.

HTMLChoice inputs

<!-- Checkbox -->
<input type="checkbox" id="terms" name="terms" value="agreed">
<label for="terms">I agree to the terms</label>

<!-- Radio group — same name, different values -->
<input type="radio" id="free"  name="plan" value="free"  checked>
<label for="free">Free</label>
<input type="radio" id="pro"   name="plan" value="pro">
<label for="pro">Pro</label>

<!-- File input -->
<input type="file" name="avatar" accept="image/png, image/jpeg">

<!-- Hidden field -->
<input type="hidden" name="csrf_token" value="xyz789">

Section 4

Key Attributes Reference

Attribute	Works with	Effect
`min` / `max`	number, range, date, time	Sets the minimum/maximum allowed value
`step`	number, range, date, time	Sets the increment for the spinner/slider
`maxlength`	text, email, password, search	Maximum character count allowed
`minlength`	text, email, password	Minimum characters required
`pattern`	text, email, url, tel	Regex the value must match
`accept`	file	MIME types or extensions allowed
`multiple`	file, email	Allows selecting multiple files or emails
`checked`	checkbox, radio	Pre-selects the input
`disabled`	all	Greyed out — value is NOT submitted
`readonly`	text inputs	Can't edit — value IS submitted
`autofocus`	all	Focuses this input when the page loads

💡

disabled vs readonly

disabled inputs look greyed out and their value is never submitted. readonly inputs look normal, can't be edited, but their value is submitted. Use readonly for pre-filled data you want to send (like a calculated total), and disabled for options that aren't applicable.

🧩 Quick Check — Lesson 19

5 questions · instant feedback

1. Which input type shows a numeric keyboard on mobile AND validates for a specific number format?

2. You have two radio buttons. How do you make them mutually exclusive (selecting one deselects the other)?

3. An input is disabled. What happens to its value when the form is submitted?

4. Which attribute restricts a file input to only images?

5. What does type="hidden" do?

🏆

Quiz Complete!

Input types mastered! Next: keeping data valid with HTML5 validation.

🏆

Lesson 19 Challenge

Code exercise · 20 min

Build a user profile form using at least 8 different input types.

Include fields for:
- Username (text, maxlength 20)
- Email (email, required)
- Password (password, minlength 8)
- Date of birth (date, max set to today)
- Phone number (tel)
- Country website (url)
- Profile colour theme (color)
- Newsletter opt-in (checkbox)
- Experience level (radio: Beginner / Intermediate / Advanced)
- Profile picture upload (file, accept image/*)

All inputs must have correct label associations and name attributes. Add a submit button.

Show hints

For the date max, you can hardcode today's date as YYYY-MM-DD or set it with JavaScript: document.getElementById('dob').max = new Date().toISOString().split('T')[0]
Radio buttons share the same name but need unique id values
The file input needs enctype="multipart/form-data" on the form element if you were to actually submit it
Test on mobile — you'll see different keyboards appear for email, tel, and url types

← Form Basics

Lesson 19 of 35

Form Validation →