HTML Input Types

The <input> element is the master of disguise. By altering a single attribute—the type attribute—this one tag can transform into dozens of different user interfaces, from simple text boxes to interactive color pickers and calendars. Let's explore the most useful input variants available in HTML.

---

The Core Text Inputs

type="text"

This is the absolute default behavior of the input element. It generates a single-line text field meant for general data like first names, cities, or street addresses.

type="password"

To secure sensitive data from "shoulder-surfers," the password type obscures whatever the user types by replacing characters with solid circles or asterisks.

type="email"

Visually identical to a text box, but functionally much smarter. If a user tries to submit an email field without an "@" symbol or domain, the browser will automatically halt the form submission and display an error. Furthermore, on mobile devices, tapping this field automatically switches the keyboard to one containing the "@" and ".com" keys!

<form>
  <label for="user">Username:</label>
  <input type="text" id="user" name="user">

  <label for="pass">Password:</label>
  <input type="password" id="pass" name="pass">

  <label for="mail">Recovery Email:</label>
  <input type="email" id="mail" name="mail">
</form>

---

Numeric and Range Inputs

type="number"

Restricts the user to only entering numerical digits. Browsers will automatically append tiny up/down arrows (spinners) to the side of the field to increment the value easily. You can restrict the range using min and max attributes.

<!-- A field that only accepts numbers between 1 and 10 -->
<label for="qty">Quantity (1-10):</label>
<input type="number" id="qty" name="qty" min="1" max="10">

type="range"

Transforms the input into an interactive slider. This is excellent for collecting subjective data where an exact number doesn't matter as much as a visual scale (like volume control or a satisfaction survey).

<label for="vol">Volume Level:</label>
<input type="range" id="vol" name="vol" min="0" max="100">

---

Interactive Graphical Inputs

type="color"

Instead of forcing users to type a HEX code (like #FF0000), using the color type summons the native color picker tool built into their operating system or browser, allowing them to select a color visually.

type="date"

Rather than relying on clunky third-party JavaScript calendars, HTML now natively supports a date picker element. Clicking it reveals an interactive, fully functional calendar popup.

<label for="theme">Profile Color:</label>
<input type="color" id="theme" name="theme" value="#20c997">

<label for="bday">Date of Birth:</label>
<input type="date" id="bday" name="bday">