Form Input Types

1. Introduction

In the previous lesson you learned the overall form structure. Now you will dive deep into individual input types. Each type serves a specific purpose and the browser uses the type to display the correct UI control and validate the input.

Choosing the right input type is important for accessibility, mobile usability, and user experience. The right type gives users the right keyboard on mobile and the right browser validation for free.

2. Theory

Text Inputs

<!-- Standard single-line text -->
<input type="text" name="username" placeholder="Enter username">

<!-- Email -- validates @ symbol -->
<input type="email" name="email">

<!-- Password -- hides characters -->
<input type="password" name="password" minlength="8">

<!-- Search -- may show X to clear on some browsers -->
<input type="search" name="q" placeholder="Search...">

<!-- URL -- validates http/https format -->
<input type="url" name="website" placeholder="https://example.com">

<!-- Tel -- no format validation, shows numeric keyboard on mobile -->
<input type="tel" name="phone" placeholder="+44 7700 900123">

Number Inputs

<!-- Number -- with spinner arrows, min/max validation -->
<input type="number" name="age" min="18" max="120" step="1">

<!-- Range -- slider control -->
<label for="volume">Volume: <span id="volLabel">50</span></label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"
       oninput="document.getElementById('volLabel').textContent = this.value">

Date and Time Inputs

<!-- Date picker -->
<input type="date" name="birthday" min="1900-01-01" max="2010-12-31">

<!-- Time picker -->
<input type="time" name="meeting-time">

<!-- Date and time together -->
<input type="datetime-local" name="appointment">

<!-- Month picker -->
<input type="month" name="expiry">

<!-- Week picker -->
<input type="week" name="week">

Checkboxes

For yes/no choices. Each checkbox is independent.

<!-- Single checkbox -->
<label>
  <input type="checkbox" name="newsletter" value="yes">
  Subscribe to newsletter
</label>

<!-- Multiple checkboxes -- same name, different values -->
<p>Preferred contact method:</p>
<label><input type="checkbox" name="contact" value="email"> Email</label>
<label><input type="checkbox" name="contact" value="phone"> Phone</label>
<label><input type="checkbox" name="contact" value="post"> Post</label>

<!-- Pre-checked -->
<input type="checkbox" name="terms" required checked>

Radio Buttons

For choosing exactly one option from a group. Same name = same group.

<p>What is your gender?</p>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label><input type="radio" name="gender" value="nonbinary"> Non-binary</label>
<label><input type="radio" name="gender" value="prefer-not"> Prefer not to say</label>

File Upload

<!-- Single file -->
<input type="file" name="avatar" accept="image/*">

<!-- Multiple files -->
<input type="file" name="documents" accept=".pdf,.doc,.docx" multiple>

accept filters the file picker. Common values: image/*, video/*, .pdf, .jpg,.png

Colour Picker

<label for="fav-color">Favourite colour:</label>
<input type="color" id="fav-color" name="color" value="#2563eb">

Hidden Input

<!-- Not visible but submitted with form -->
<input type="hidden" name="user_id" value="12345">

Used to pass data the user should not change — like a user ID or CSRF token.

Datalist — Autocomplete Suggestions

<label for="browser">Favourite Browser:</label>
<input type="text" id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Provides autocomplete suggestions while still allowing free text input.

3. Real World Example

A flight booking form uses: text for name, email for contact, date pickers for departure/return, number for passenger count, radio buttons for cabin class (Economy/Business/First), checkboxes for add-ons (extra baggage, insurance, meal), and file upload for passport scan. Every input type serves a specific need.

4. Code Example

<form>
  <h2>Survey Form</h2>

  <!-- Text -->
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <!-- Number with min/max -->
  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="16" max="100">

  <!-- Radio buttons -->
  <p>How did you hear about us?</p>
  <label><input type="radio" name="source" value="google"> Google Search</label>
  <label><input type="radio" name="source" value="friend"> Friend</label>
  <label><input type="radio" name="source" value="social"> Social Media</label>

  <!-- Checkboxes -->
  <p>Topics you are interested in (select all that apply):</p>
  <label><input type="checkbox" name="topic" value="html"> HTML</label>
  <label><input type="checkbox" name="topic" value="css"> CSS</label>
  <label><input type="checkbox" name="topic" value="js"> JavaScript</label>

  <!-- Range slider -->
  <label for="rating">Overall satisfaction: <span id="ratingVal">5</span>/10</label>
  <input type="range" id="rating" name="rating"
         min="1" max="10" value="5"
         oninput="document.getElementById('ratingVal').textContent = this.value">

  <!-- Date -->
  <label for="visit-date">When did you visit?</label>
  <input type="date" id="visit-date" name="visit-date">

  <!-- File -->
  <label for="screenshot">Upload a screenshot (optional):</label>
  <input type="file" id="screenshot" name="screenshot" accept="image/*">

  <button type="submit">Submit Survey</button>
</form>

5. Code Breakdown

Input	What It Does
type="number" min="16" max="100"	Shows spinner arrows. Browser blocks submission if value is outside range.
type="radio" name="source"	Same name groups radios — only one can be selected at a time.
type="checkbox" name="topic" value="html"	Each checkbox is independent. Multiple can be checked. The submitted value is "html".
type="range" oninput="..."	Slider. oninput fires live as the slider moves, updating the label display.
type="file" accept="image/*"	Opens file picker filtered to image files only.

6. Common Mistakes

7. Best Practices

8. Practice Exercise

Create a Pizza Order Form with:

• Customer name (text)
• Phone number (tel)
• Pizza size — Small, Medium, Large (radio buttons in a fieldset)
• Crust — Thin, Thick, Stuffed (radio buttons in a fieldset)
• Toppings — at least 6 options (checkboxes in a fieldset)
• Quantity (number, min 1, max 10)
• Delivery time preference (datetime-local)
• Special instructions (textarea)

9. Assignment

Build a medical intake form (fictional). Use: text for name/address, date for date of birth, select for blood type, number for height and weight, radio for gender, checkboxes for symptoms from a list, a range slider for pain level (1–10), a file upload for insurance card, and a textarea for additional notes.

10. Interview Questions

Q1: What is the difference between radio buttons and checkboxes?

Answer: Radio buttons allow selecting exactly one option from a group — selecting a new one deselects the previous. Checkboxes are independent — any number can be checked or unchecked simultaneously. Use radio buttons for mutually exclusive choices (gender, size), checkboxes for independent choices (interests, features).

Q2: How do you group radio buttons so only one can be selected?

Answer: Give all radio buttons in the group the same name attribute. The browser then treats them as a group and ensures only one can be selected at a time. The value attribute determines what data is submitted when that radio is selected.

Q3: What does the accept attribute do on a file input?

Answer: The accept attribute filters the file picker to show only files of the specified types. For example: accept="image/*" shows only image files, accept=".pdf,.doc" shows only PDF and Word files. Note: this is only a UI hint — actual file type validation must be done server-side.

11. Additional Resources

• MDN — HTML Input Types Reference
• MDN — Datalist Element
• Can I Use — Input Type Support