Français

<input>

Create an input field — and there are 20 different types

— 1 min read

  • HTML
  • accessibility
  • semantics
  • forms

<input> — The input field

The <input> element creates an interactive input field. Its type attribute determines its behavior: text, email, telephone, number, date, checkbox, radio, file, hidden, submit, and many more.

When to use it

You want to collect an email address (type="email"), a phone number (type="tel"), a date (type="date"), a number (type="number"), a binary choice (type="checkbox"), an exclusive choice (type="radio"), or a file (type="file").

What you gain

Accessibility: each type activates the appropriate virtual keyboard on mobile (email, tel, number). Native validation guides users without extra JavaScript.

Code example

<label for="name">Full name:</label>
<input type="text" id="name" name="name" required autocomplete="name">
 
<label for="email">Email:</label>
<input type="email" id="email" name="email" required autocomplete="email">
 
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
 
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob">
 
<label>
  <input type="checkbox" name="newsletter" value="yes">
  Subscribe to newsletter
</label>

Further reading