Input Types: text, email, password, number, date, checkbox, radio, file

12 min read

The Versatile Input Element

The <input> element changes its behaviour entirely based on its type attribute. HTML5 added many new types that provide built-in validation, mobile-friendly keyboards, and native UI controls.

html

<form>
  <!-- Text -->
  <input type="text" name="username" placeholder="Enter username" />

  <!-- Email (validates format) -->
  <input type="email" name="email" placeholder="you@example.com" />

  <!-- Password (masked input) -->
  <input type="password" name="password" />

  <!-- Number (shows spinner) -->
  <input type="number" name="age" min="1" max="120" />

  <!-- Date picker -->
  <input type="date" name="birthday" />

  <!-- Checkbox -->
  <input type="checkbox" name="subscribe" id="subscribe" />
  <label for="subscribe">Subscribe to newsletter</label>

  <!-- Radio buttons (same name groups them) -->
  <input type="radio" name="plan" value="free" id="free" />
  <label for="free">Free</label>
  <input type="radio" name="plan" value="pro" id="pro" />
  <label for="pro">Pro</label>

  <!-- File upload -->
  <input type="file" name="resume" accept=".pdf,.doc" />
</form>

Mobile browsers show the most appropriate keyboard for each input type — a number pad for type="number", an email keyboard (with @) for type="email", and so on. Always choose the correct type for a better user experience.

Ready to test yourself?

Practice HTML— quiz & coding exercises