HTML Input Types Reference

All 22 HTML input types with live demos, code snippets, and key attributes

What is HTML Input Types Reference?

HTML Input Types Reference is a quick-access guide to all 22 input types defined in the HTML Living Standard, including text, email, number, date, range, file, color, and the lesser-known types like tel, search, and week. Each entry shows the rendered input, its key attributes, default behavior, and browser support notes.

The <input> element is the most versatile element in HTML. Its type attribute switches between fundamentally different widgets — a calendar picker, a file upload dialog, a toggle switch, a color swatch — all from a single tag. Knowing which type to reach for prevents you from reinventing native functionality with JavaScript.

For example, using type="email" instead of type="text" gives you free format validation, a different software keyboard on mobile (with the @ key prominent), and autocomplete integration at the OS level. Using type="number" with min, max, and step attributes provides built-in range clamping. Using type="date" renders a native date picker that avoids all the complexity of JavaScript calendar libraries.

This reference is aimed at developers who want to look up attribute combinations quickly without digging through the full HTML specification or MDN sidebar.

How to Use

  1. Browse the table to find the input type you need — types are sorted alphabetically.
  2. Check the Key Attributes column for the most important attributes specific to each type.
  3. Read the Notes column for gotchas, browser quirks, and mobile keyboard behavior.
  4. Click the live example to interact with a real rendered input in your browser.
  5. Copy the HTML snippet for the type you want and paste it into your project.

Examples

type="range" min="0" max="100" step="5"

→ Renders a slider that snaps to multiples of 5. Combine with an element to display the current value.

type="color" value="#3b82f6"

→ Opens the OS color picker. Returns a lowercase 6-digit hex string. Does not support alpha channels.

type="date" min="2024-01-01" max="2024-12-31"

→ Shows a calendar constrained to 2024. The value is always in YYYY-MM-DD format regardless of locale display.

Frequently Asked Questions

What happens if a browser doesn't support a type?

Unsupported types fall back silently to type="text". This means your form still works, but you lose the native widget, validation, and keyboard hints.

Can I style native input widgets with CSS?

Partially. You can style color, size, border, and background freely. Checkbox and radio appearance can be overridden with appearance: none. Date, range, and color pickers have limited styling — many developers hide them and build custom overlays for full design control.

Is type='tel' validated automatically?

No. Unlike type='email', the browser does not validate phone number format — formats vary too much by country. Use it anyway because it triggers the numeric keypad on iOS and Android.

What is the difference between type='number' and type='tel'?

type='number' allows arithmetic operations (increment/decrement, min/max, step) and shows a numeric spinbox. type='tel' is just a text field that hints to mobile OSes to show a phone keyboard — no format validation.

When should I use type='search' instead of type='text'?

type='search' shows a clear (✕) button in most browsers and may activate OS-level search history. Use it when the field's semantic purpose is searching, even if the visual difference is minor.

Related Tools