HTML Input Types Reference

You’re building a form with an email field, phone number, date picker, and file upload. You use type="text" for all of them because you can’t remember which input types trigger the right mobile keyboard, which ones validate automatically, and which ones give you a native date picker instead of needing a JavaScript library. The result: mobile users type emails without the @ key on their keyboard, phone numbers accept letters, and you’re importing a 40KB date picker library for something the browser does natively.

Why This Reference (Not MDN)

MDN documents each input type on a separate page — 22 pages to compare behaviors. This reference puts all 22 types on one page with attributes, built-in validation, mobile keyboard behavior, accessibility notes, and a form snippet generator. Find the right input type by what it does, not by navigating between pages. Everything runs in your browser; no data is sent anywhere.

What Are HTML Input Types?

The HTML <input> element is the most versatile form element in HTML. Its behavior, appearance, and validation are entirely determined by the type attribute. As of HTML5, there are 22 standardized input types — from simple text fields to date pickers, sliders, color selectors, and file uploads.

Choosing the right input type gives you three benefits for free:

1. Correct mobile keyboard — type="email" shows the @ key; type="tel" shows the dial pad; type="url" shows .com key
2. Browser-native validation — type="email" requires a valid email format; type="number" enforces min/max/step
3. Better accessibility — the semantic type is communicated to assistive technology, helping screen readers announce the field’s purpose

Text Input Types

These types accept text and differ mainly in semantics, keyboard behavior, and validation format.

type="text" — General Text

The default input type. Accepts any string value.

<input type="text" id="name" name="name" placeholder="Full name" required>

Key attributes: placeholder, maxlength, minlength, pattern, autocomplete, readonly, required

Use autocomplete to help browsers fill saved values. Use pattern with a title attribute to document the expected format:

<input type="text" name="username"
       pattern="[a-zA-Z0-9_]{3,20}"
       title="3–20 characters: letters, numbers, underscores only"
       required>

type="password" — Password Field

Masks characters and hints to password managers. Always set autocomplete:

<!-- Login form -->
<input type="password" name="password" autocomplete="current-password" required>

<!-- Registration form -->
<input type="password" name="new-password" autocomplete="new-password" required>

Never disable paste on password fields — it prevents password managers from working. Browser-native password reveal buttons (eye icon) are increasingly common.

type="email" — Email Address

Validates basic email format (something@domain.tld). On mobile, shows keyboard with @ and .com keys.

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

Use multiple to accept comma-separated email addresses:

<input type="email" name="cc" multiple placeholder="email1@example.com, email2@example.com">

Note: HTML email validation is intentionally lenient. It does not verify the mailbox exists. Always validate server-side.

type="url" — URL

Requires a valid absolute URL including scheme (https://). Bare domain names like example.com fail validation.

<input type="url" name="website" placeholder="https://example.com">

Use placeholder to show the required scheme, as users often omit it.

type="tel" — Telephone Number

Shows phone dial pad on mobile. Has no built-in validation — phone formats vary by country. Always add pattern:

<input type="tel" name="phone"
       pattern="[+][0-9]{11,14}"
       title="International format: +15551234567"
       autocomplete="tel" required>

type="search" — Search Query

Semantically marks the field as a search input. Chrome and Safari render a clear × button when the field has content.

<form role="search">
  <label for="q" class="sr-only">Search</label>
  <input type="search" id="q" name="q" placeholder="Search…">
  <button type="submit">Search</button>
</form>

Numeric Input Types

type="number" — Numeric Input

Shows spinner arrows on desktop. Validates min, max, and step constraints.

<input type="number" name="quantity" min="1" max="99" step="1" value="1">

When NOT to use type="number": credit card numbers, phone numbers, ZIP codes, IBANs — these are digit strings, not quantities. Use type="text" or type="tel" with pattern for those.

To hide browser spinner buttons with CSS:

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type="number"] { -moz-appearance: textfield; }

type="range" — Slider

Always has a value (defaults to midpoint of min/max). Never triggers a validation error. Always display the current value visually:

<label for="vol">Volume: <output id="vol-display">50</output></label>
<input type="range" id="vol" name="volume"
       min="0" max="100" step="5" value="50"
       oninput="document.getElementById('vol-display').value = this.value">

Date & Time Input Types

All date/time types store values in a standardized machine format, but browsers may display them in a locale-specific way.

type="date" — Date Picker

<input type="date" name="dob"
       min="1900-01-01"
       max="2025-12-31"
       required>

type="datetime-local" — Date + Time

No timezone adjustment. The stored value is exactly what the user enters:

<input type="datetime-local" name="appointment"
       min="2025-01-01T08:00"
       max="2025-12-31T18:00">

type="month" — Month Picker

Useful for credit card expiry dates. Not supported in Firefox desktop (falls back to text):

<input type="month" name="expiry" min="2025-01">

type="week" — Week Picker

ISO week format. Not supported in Firefox or Safari — provide JavaScript fallback:

<input type="week" name="sprint" min="2025-W01">

type="time" — Time Picker

24-hour format stored, but browsers may display 12-hour format by locale. Control granularity with step (in seconds):

<!-- 30-minute intervals -->
<input type="time" name="start" min="09:00" max="17:00" step="1800">

Selection Input Types

type="checkbox" — Boolean Toggle

<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">Subscribe to newsletter</label>

Important: Unchecked checkboxes are absent from submitted form data entirely. To send a false value, add a hidden input before the checkbox:

<input type="hidden" name="newsletter" value="no">
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">Subscribe to newsletter</label>

Group related checkboxes in <fieldset> + <legend>:

<fieldset>
  <legend>Interests</legend>
  <input type="checkbox" id="html" name="interest" value="html">
  <label for="html">HTML</label>
  <input type="checkbox" id="css" name="interest" value="css">
  <label for="css">CSS</label>
</fieldset>

type="radio" — Single Selection

All radios in a group must share the same name attribute. Selecting one automatically deselects the others:

<fieldset>
  <legend>Payment Method</legend>
  <input type="radio" id="card" name="payment" value="card" checked>
  <label for="card">Credit Card</label>
  <input type="radio" id="paypal" name="payment" value="paypal">
  <label for="paypal">PayPal</label>
</fieldset>

Arrow keys navigate between radios in a group automatically — keyboard users do not Tab between radios.

Media Input Types

type="color" — Color Picker

Returns a lowercase 6-digit hex string (#rrggbb). No alpha channel support. Offer preset colors via <datalist>:

<input type="color" id="brand" name="brand-color" value="#3b82f6"
       list="color-presets">
<datalist id="color-presets">
  <option value="#3b82f6">Blue</option>
  <option value="#ef4444">Red</option>
  <option value="#22c55e">Green</option>
</datalist>

type="file" — File Upload

The accept attribute filters which files appear in the chooser dialog, but it does NOT prevent users from selecting other files — always validate server-side:

<!-- Single image -->
<input type="file" name="avatar" accept="image/*">

<!-- Multiple documents -->
<input type="file" name="docs" accept=".pdf,.docx" multiple>

<!-- Mobile camera capture -->
<input type="file" name="photo" accept="image/*" capture="environment">

Styling file inputs requires the visually-hidden technique:

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
  overflow: hidden;
}

<label for="file-upload" class="custom-file-button">Choose File</label>
<input type="file" id="file-upload" class="file-input-hidden">

Form Control Input Types

type="hidden" — Hidden Field

Passes data with form submission without displaying it to users. Values are visible in page source and dev tools — never use for sensitive data:

<input type="hidden" name="csrf_token" value="abc123xyz">
<input type="hidden" name="record_id" value="42">

type="submit" — Submit Button

Triggers form validation then submits. Use formnovalidate to skip validation (e.g., “Save Draft”):

<input type="submit" value="Create Account">
<input type="submit" value="Save Draft" formaction="/drafts" formnovalidate>

type="reset" — Reset Button

Resets all form fields to their initial HTML-specified values. Use sparingly — easy to trigger accidentally:

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

type="button" — Generic Button

No default action. Requires JavaScript:

<input type="button" value="Toggle Preview" onclick="togglePreview()">

Prefer <button type="button"> which can contain HTML:

<button type="button" onclick="togglePreview()">
  <svg>…</svg> Toggle Preview
</button>

type="image" — Image Submit Button

Renders an image that submits the form when clicked. Submits name.x and name.y coordinates:

<input type="image" src="/submit-order.png" alt="Place Order"
       width="140" height="44">

Always provide meaningful alt text — it’s the accessible name of the button.

Attribute Quick Reference

Universal attributes (apply to all input types):

Type-specific attributes:

Accessibility Best Practices

Always Use <label>

Every input must have a programmatically associated label:

<!-- Good: explicit for/id association -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Good: implicit (input wrapped in label) -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address"> <!-- No accessible name! -->

Group Related Controls

<fieldset>
  <legend>Delivery Address</legend>
  <label for="street">Street</label>
  <input type="text" id="street" name="street">
  <label for="city">City</label>
  <input type="text" id="city" name="city">
</fieldset>

Describe Constraints

Use aria-describedby for hints and error messages:

<label for="pwd">Password</label>
<input type="password" id="pwd" name="password"
       aria-describedby="pwd-hint" required>
<p id="pwd-hint">At least 8 characters, one uppercase, one number.</p>

FAQ

What is the best input type for phone numbers?

Use type="tel" for the mobile dial pad keyboard, combined with a pattern attribute for format enforcement. The tel type provides no built-in validation, so pattern is essential.

Should I use type="number" for ZIP codes?

No. Use type="text" with pattern="[0-9]{5}" or type="tel". ZIP codes can have leading zeros, and type="number" adds spinner arrows that are confusing for non-numeric quantities.

How do I style file upload buttons?

Visually hide the native file input and use a styled <label> linked to it as a custom button. Update the displayed filename with JavaScript using the change event.

Are date inputs accessible?

Browser-native date pickers are generally accessible but vary in keyboard interaction patterns. For consistent, fully accessible date selection, consider a well-tested JavaScript date picker component with proper ARIA attributes.

Is my data sent to a server when I use the Snippet Generator?

No. All snippet generation happens entirely in your browser using JavaScript. Nothing is sent to any server.