HTML Input Types

The baseline free-form text field. No format validation — use it for names, titles or anything without a predictable pattern.

<label for="name">Full name</label>
<input type="text" id="name" name="name"
  placeholder="Ada Lovelace" required>

Requires a valid name@domain pattern before the form can submit, and triggers the @ keyboard on mobile.

<input type="email" id="email"
  placeholder="you@example.com"
  multiple required>

Masks every character as it's typed. Pair it with minlength and a pattern for strength rules.

<input type="password" id="pwd"
  minlength="8" autocomplete="new-password"
  required>

Visually similar to text, but adds a native clear (×) button in most browsers and tells assistive tech this is a search field.

<input type="search" id="q"
  placeholder="Search…"
  aria-label="Search docs">

Shows a numeric phone keypad on mobile. It does not validate format by default — use pattern for country-specific rules.

<input type="tel" id="phone"
  pattern="[0-9+()\- ]{7,}"
  placeholder="+1 (555) 000-0000">

Requires a full, valid URL including scheme (https://) and shows the .com-friendly keyboard on mobile.

<input type="url" id="site"
  placeholder="https://yoursite.com">

Restricts input to numeric values and adds increment/decrement arrows. Combine with min, max and step.

<input type="number" id="qty"
  min="1" max="10" step="1"
  value="1">

A visual slider for approximate values where the exact number is less important than the position — volume, brightness, price filters.

<input type="range" id="budget"
  min="0" max="100" value="60">

Opens a native calendar picker and always submits an unambiguous YYYY-MM-DD value regardless of locale display.

<input type="date" id="dob"
  max="2015-01-01">

A native hour/minute picker, submitted in 24-hour HH:MM format regardless of the locale shown to the user.

<input type="time" id="slot"
  step="900">

Captures a year and month only — ideal for expiry dates or billing periods where a specific day doesn't apply.

<input type="month" id="expiry"
  min="2024-01">

Captures an ISO week number within a year — useful for weekly reports, sprints, or shift scheduling.

<input type="week" id="sprint">

Combines date and time into a single control, without timezone conversion — the value is local to whatever the user selects.

<input type="datetime-local"
  id="start" step="60">

An independent on/off toggle. Group several under one name to collect multiple selections.

<input type="checkbox" id="news"
  name="news" checked>
<label for="news">Email updates</label>

Mutually exclusive options. Every radio in the group must share the same name so only one can be selected.

<input type="radio" id="m"
  name="plan" checked>
<label for="m">Monthly</label>

Opens the OS-native color picker and always returns a lowercase 6-digit hex value like #4f8cff.

<input type="color" id="accent"
  value="#4f8cff">

Opens the OS file picker. Restrict formats with accept, and allow multiple files with the multiple attribute.

<input type="file" id="avatar"
  accept="image/*">

Submits the enclosing form. A form's first submit button also fires when the user presses Enter inside any text field.

<input type="submit"
  value="Create account">

Clears every field in the form back to its default value. Use sparingly — it's a common source of accidental data loss.

<input type="reset"
  value="Clear form">

Does nothing on its own — no submit, no reset. Exists purely as a hook for your own JavaScript event listener.

<input type="button"
  value="Preview" onclick="…">

A submit button rendered as an image, and it also reports the x/y coordinates the user clicked — a legacy pattern, rarely needed today.

<input type="image"
  src="pay.svg" alt="Pay now">

Never rendered, never focusable — carries data like a CSRF token or session ID silently to the server on submit.

<input type="hidden"
  name="csrf_token" value="…">