Form Input Types & Attributes

Why Input Types Matter

HTML provides a wide range of input types, each designed for a specific kind of data. Using the correct input type improves user experience by showing the right keyboard on mobile devices, enables built-in browser validation, and helps assistive technologies understand what data is expected. In this lesson, you will learn every input type available in HTML and the attributes that control their behavior.

Text-Based Input Types

The most common inputs deal with text in various forms. Each type tells the browser what kind of text to expect, which affects validation, autocomplete behavior, and mobile keyboard layout.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your name" required>

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" minlength="8">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" multiple>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}">

  <label for="website">Website:</label>
  <input type="url" id="website" name="website">

  <label for="q">Search:</label>
  <input type="search" id="q" name="q">
</form>

The text type is the default and accepts any string. The password type masks characters as dots. The email type validates that the value contains an @ symbol and a domain. The tel type does not enforce a format on its own, but it triggers a numeric keypad on mobile devices. The url type requires a valid URL format including the protocol. The search type behaves like text but may include a clear button in some browsers.

Date, Time, and Numeric Inputs

HTML5 introduced native date and time pickers, removing the need for JavaScript libraries in many cases. Numeric inputs allow you to constrain values with minimum, maximum, and step attributes.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" min="1950-01-01" max="2010-12-31">

<label for="meeting">Meeting Time:</label>
<input type="time" id="meeting" name="meeting" min="09:00" max="17:00">

<label for="appointment">Appointment:</label>
<input type="datetime-local" id="appointment" name="appointment">

<label for="month">Birth Month:</label>
<input type="month" id="month" name="month">

<label for="week">Preferred Week:</label>
<input type="week" id="week" name="week">

<label for="qty">Quantity:</label>
<input type="number" id="qty" name="qty" min="1" max="100" step="1">

The date type presents a date picker in most browsers. The min and max attributes restrict the selectable range. The datetime-local type combines both date and time into a single input without timezone information. The number type shows increment and decrement arrows, and the step attribute controls the interval between valid values.

Special Input Types

Beyond text and dates, HTML offers inputs for colors, ranges, files, and hidden data. These specialized types serve distinct purposes in form design.

<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color" value="#3498db">

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">

<label for="avatar">Upload Photo:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" multiple>

<input type="hidden" name="user_id" value="12345">

The color type opens a color picker and stores the value as a hex code. The range type displays a slider, ideal for settings like volume or brightness. The file type opens the system file dialog, and the accept attribute filters which file types are shown. The multiple attribute allows selecting several files at once. The hidden type stores data that should be submitted with the form but not displayed to the user, such as tokens or IDs.

Checkbox and Radio Inputs

Checkboxes allow users to select multiple options independently, while radio buttons force a single selection within a group. Radio buttons must share the same name attribute to be grouped.

<!-- Checkboxes: multiple selections allowed -->
<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" checked> JavaScript</label>

<!-- Radio buttons: only one selection per group -->
<label><input type="radio" name="level" value="beginner"> Beginner</label>
<label><input type="radio" name="level" value="intermediate" checked> Intermediate</label>
<label><input type="radio" name="level" value="advanced"> Advanced</label>

Essential Input Attributes

Attributes modify how inputs behave. The placeholder attribute shows hint text that disappears when the user starts typing. The required attribute prevents form submission if the field is empty. The disabled attribute grays out the field and excludes its value from submission, while readonly prevents editing but still submits the value. The autofocus attribute places the cursor in a field automatically when the page loads. The autocomplete attribute controls whether the browser suggests previously entered values. The maxlength attribute limits the number of characters the user can type. The pattern attribute accepts a regular expression for custom validation.

The datalist Element

The <datalist> element provides autocomplete suggestions for an input without restricting the user to those options. It combines the flexibility of a text input with the convenience of a dropdown.

<label for="framework">Favorite Framework:</label>
<input type="text" id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
  <option value="React">
  <option value="Vue">
  <option value="Angular">
  <option value="Svelte">
  <option value="Laravel">
</datalist>

The input references the datalist through the list attribute, which must match the datalist id. Users can either select a suggestion or type a completely custom value.