HTML Input Types Reference

The <input> element's type attribute determines the appearance and behavior of the input field. HTML provides 20+ input types covering text, numeric, date, selection, button, and other scenarios.

Text Input Types

Text input types are used to collect various forms of textual information:

• type="text" — Default type, single-line text input
• type="password" — Password input, characters are masked
• type="email" — Email address, auto-validates format, mobile keyboards show @
• type="tel" — Telephone number, mobile keyboards show numeric keypad
• type="url" — URL input, auto-validates URL format
• type="search" — Search box, some browsers show a clear button

<form>
  <label>Username: <input type="text" name="username" placeholder="Enter username"></label><br>
  <label>Password: <input type="password" name="password" placeholder="At least 6 characters"></label><br>
  <label>Email: <input type="email" name="email" placeholder="you@example.com"></label><br>
  <label>Phone: <input type="tel" name="phone" placeholder="13800138000"></label><br>
  <label>Website: <input type="url" name="website" placeholder="https://"></label><br>
  <label>Search: <input type="search" name="q" placeholder="Search keywords"></label>
</form>

Numeric Input Types

Numeric input types let users select or enter numbers and color values:

• type="number" — Number input, can restrict min, max, step
• type="range" — Slider selector, returns a numeric value
• type="color" — Color picker, returns a hexadecimal color value

<form>
  <label>Quantity (1-10): <input type="number" name="qty" min="1" max="10" value="1"></label><br>
  <label>Volume: <input type="range" name="volume" min="0" max="100" value="50"></label><br>
  <label>Theme Color: <input type="color" name="theme" value="#ff6600"></label>
</form>

<!-- range and number sync (requires JS) -->
<input type="range" id="slider" min="0" max="100" value="50">
<input type="number" id="numDisplay" min="0" max="100" value="50">
<script>
  const slider = document.getElementById('slider');
  const num = document.getElementById('numDisplay');
  slider.addEventListener('input', () => num.value = slider.value);
  num.addEventListener('input', () => slider.value = num.value);
</script>

Date and Time Input Types

Date and time input types let users quickly pick dates through a calendar or time picker:

• type="date" — Date picker (year-month-day)
• type="time" — Time picker (hour:minute)
• type="datetime-local" — Local date + time
• type="month" — Month picker (year-month)
• type="week" — Week picker (year-week)

<form>
  <label>Date: <input type="date" name="date"></label><br>
  <label>Time: <input type="time" name="time"></label><br>
  <label>Date + Time: <input type="datetime-local" name="datetime"></label><br>
  <label>Month: <input type="month" name="month"></label><br>
  <label>Week: <input type="week" name="week"></label>
</form>

Selection Input Types

Selection input types let users pick from multiple options:

• type="checkbox" — Checkbox, allows multiple selections
• type="radio" — Radio button, only one can be selected per name group
• type="file" — File upload, use accept to restrict file types

<form>
  <p>Hobbies (multiple selections allowed):</p>
  <label><input type="checkbox" name="hobby" value="reading"> Reading</label>
  <label><input type="checkbox" name="hobby" value="music"> Music</label>
  <label><input type="checkbox" name="hobby" value="sports"> Sports</label>

  <p>Gender (single selection):</p>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>

  <p>Upload avatar (images only):</p>
  <input type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
</form>

Button Input Types

Button input types are used to trigger form actions:

• type="submit" — Submit button, sends form data to the server
• type="reset" — Reset button, restores form controls to their initial values
• type="button" — Generic button, requires JavaScript to be functional
• type="image" — Image button, functions like submit but uses an image instead of text

<form action="/submit" method="post">
  <label>Name: <input type="text" name="name"></label><br>

  <!-- Submit button -->
  <input type="submit" value="Submit Form">

  <!-- Reset button -->
  <input type="reset" value="Reset">

  <!-- Generic button -->
  <input type="button" value="Click Me" onclick="alert('Hello!')">

  <!-- Image button -->
  <input type="image" src="btn-submit.png" alt="Submit">
</form>

Hidden and Special Inputs

type="hidden" fields are not displayed on the page but are submitted with the form. They are commonly used for passing metadata such as user IDs and CSRF tokens:

<form action="/update-profile" method="post">
  <!-- Invisible to users, but submitted with the form -->
  <input type="hidden" name="user_id" value="12345">
  <input type="hidden" name="token" value="abc123xyz">

  <label>Nickname: <input type="text" name="nickname"></label>
  <input type="submit" value="Save">
</form>

Complete Input Type Reference Table

📖 Summary

• <input type="…"> has 20+ types, categorized by use: text, numeric, date, selection, button, and hidden
• Text types: text, password, email, tel, url, search
• Numeric types: number (precise), range (slider), color (color picker)
• Date types: date, time, datetime-local, month, week
• Selection types: checkbox (multi-select), radio (single-select), file (upload)
• Button types: submit, reset, button (generic), image
• Special: hidden (hidden field for passing metadata)

📝 Exercises

1. Registration Form: Create a "Sign Up" form containing 5+ input types: text (username), email, password, date (birthday), radio (gender), checkbox (hobbies), file (avatar upload), submit, and reset.
2. Range Sync: Create a range slider and a number input that sync their values in real time. Range: 0–100, step: 5.