HTML Input Types

Previous Next

The <input> element supports many types for different kinds of data and UI controls. Below is a quick reference and live examples.

Quick Reference

Type	Purpose	Notes
`text`	Single-line text	Use `maxlength`, `pattern`, `placeholder`
`password`	Masked text	Not secure by itself; use HTTPS
`email`	Email address	Built-in validation
`url`	Website URL	Built-in validation
`tel`	Telephone	No built-in validation; use `pattern`
`number`	Numeric input	Use `min`, `max`, `step`
`range`	Slider	Use with `min`, `max`, `step`
`date`, `time`, `datetime-local`, `month`, `week`	Date/time pickers	Browser UI varies
`color`	Color picker	Returns HEX
`file`	File upload	Use `accept`, `multiple`
`checkbox`	Multi-select boolean	Use `name="x[]"` for arrays
`radio`	Single choice	Same `name` groups options
`hidden`	Hidden value	Submitted with form
`search`	Search box	May show clear button
`button`	Generic button	Use JS for action
`submit`	Submit form	—
`reset`	Reset form	—

Examples


<form action="#" method="get" onsubmit="return false;">
  <!-- Text & Password -->
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="pwd" placeholder="Password">

  <!-- Email, URL, Tel -->
  <input type="email" name="email" placeholder="you@example.com">
  <input type="url" name="website" placeholder="https://">
  <input type="tel" name="phone" pattern="[0-9]{10}" placeholder="10-digit number">

  <!-- Number & Range -->
  <input type="number" name="age" min="1" max="120">
  <input type="range" name="satisfaction" min="0" max="10">

  <!-- Dates -->
  <input type="date" name="dob">
  <input type="time" name="alarm">
  <input type="datetime-local" name="meeting">
  <input type="month" name="billing_month">
  <input type="week" name="sprint_week">

  <!-- Color & File -->
  <input type="color" name="favcolor" value="#ff9900">
  <input type="file" name="resume" accept=".pdf,.doc,.docx">

  <!-- Radio & Checkbox -->
  <p>Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>

  <p>Skills:
    <label><input type="checkbox" name="skills[]" value="html"> HTML</label>
    <label><input type="checkbox" name="skills[]" value="css"> CSS</label>
    <label><input type="checkbox" name="skills[]" value="js"> JavaScript</label>
  </p>

  <!-- Hidden & Search -->
  <input type="hidden" name="userid" value="12345">
  <input type="search" name="q" placeholder="Search here...">

  <!-- Buttons -->
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
  <input type="button" value="Click Me" onclick="alert('Button clicked!')">
</form>

Live Preview

Tip: Always validate input both on the client (for user experience) and the server (for security).

Previous Next