HTML Input Types

The input type attribute chooses the data a field expects, the keyboard it offers, and the native constraints the browser can apply.

The input type attribute tells the browser what kind of data a field expects. A well-chosen type can change the mobile keyboard, offer a date picker, constrain a number, or turn a text box into a checkbox. Labels, names, and validation from the HTML Forms lesson still apply; this lesson focuses on the types themselves.

Start with text, email, password, and search

The default type is text. Use email, url, tel, and search when the value has that meaning: they can offer a better keyboard and a first format check. password masks the value in the interface but does not encrypt it in transit; HTTPS still matters. autocomplete tokens help browsers fill familiar personal data without guessing from the visible label alone.

<form>
  <label for="full-name">Full name</label>
  <input id="full-name" name="name" type="text" autocomplete="name">

  <label for="work-email">Work email</label>
  <input id="work-email" name="email" type="email" autocomplete="email" required>

  <label for="new-password">Password</label>
  <input id="new-password" name="password" type="password" autocomplete="new-password" minlength="12">

  <label for="lesson-search">Search lessons</label>
  <input id="lesson-search" name="q" type="search">
</form>

• text is the default and still needs a label.
• email, url, tel, and search describe the value, not just the look.
• password hides characters; it does not replace HTTPS.
• Use autocomplete tokens that match the requested data.
• Keep name on every field that should be submitted.