// browse every html5 input type with live examples
Browse every HTML5 input type with live interactive examples, key attributes, browser support notes, and ready-to-copy code snippets. Free browser-based reference tool.
Use the category tabs or search bar to find the input type you need.
Open any card to see the live example, attributes, and browser support notes.
Copy the HTML snippet or individual attributes with one click.
An interactive reference for every HTML5 <input> type — from the familiar text and password to the lesser-known color, week, and tel. Each entry includes a live example, key attributes, and browser support notes.
type="text" and type="search"?Both accept free-form text, but search triggers search-specific UI on mobile keyboards (a "Search" return key) and may render a clear (✕) button in some browsers. Semantically, search signals intent to search engines and assistive technologies.
type="email" validate the email format?Yes — browsers perform basic format validation on form submission (e.g. must contain @). However, this is client-side only. You must still validate email addresses on the server side, as users can bypass browser validation.
type="tel" if it doesn't validate phone numbers?Even though tel does no format validation, it triggers a numeric/phone keyboard on mobile devices, dramatically improving the UX for phone number entry. Combine it with pattern and placeholder for guided input.
type="color"?color is supported in all modern browsers (Chrome, Firefox, Edge, Safari 12.1+). Older browsers fall back to a plain text input. You can use a JS color picker polyfill for full compatibility.
type="date" across all browsers?date is well-supported in Chrome, Edge, and Firefox. Safari on iOS supports it, but macOS Safari has historically had inconsistent support. Always provide a text fallback or use a JS date picker for critical forms.
type="hidden" used for?Hidden inputs store data that needs to be submitted with a form but not displayed to the user — such as CSRF tokens, session IDs, or tracking values. They are invisible on screen but present in the DOM and form data.
type="range" differ from type="number"?range renders a slider and is ideal when exact values don't matter — like volume or opacity. number shows a text field with increment/decrement arrows, better when users need to enter a precise value. Use min, max, and step on both.
type="submit" and <button> interchangeable?Functionally similar for form submission, but <button type="submit"> is more flexible — it can contain HTML content like icons. <input type="submit"> can only display plain text via the value attribute. Use <button> in most cases.
The HTML <input> element is one of the most versatile in the entire HTML specification. With over 22 distinct type values, it can render as a text field, a color picker, a calendar, a file upload zone, a toggle checkbox, a submit button, and much more — all from a single element.
💡 Looking for premium HTML templates and UI kits? MonsterONE offers unlimited downloads of templates, form components, and web assets — worth checking out.
type Attribute Matter?The type attribute controls everything: the UI widget rendered, the keyboard shown on mobile, the validation behavior, the accessible semantics, and even the data format submitted. Choosing the wrong type forces users to fight your form instead of completing it. Choosing the right one can eliminate entire validation functions and improve conversion rates on mobile.
The text family — text, password, email, url, search, and tel — all render similar-looking fields but behave very differently. email triggers an email-optimized keyboard on iOS and Android (with @ front and center). url shows a keyboard with / and .com shortcuts. tel shows a numeric dial pad. These small differences have a large impact on mobile form completion rates.
type="number" restricts input to numeric values and provides browser-native increment/decrement controls. Use it with min, max, and step to define valid ranges. type="range" renders a slider — perfect for non-precise values like volume, brightness, or budget range. Always pair it with a visible output element to show the current value since the slider itself doesn't display the number by default.
HTML5 introduced a full family of date/time inputs: date, time, datetime-local, month, and week. When supported, these trigger native OS pickers that are familiar to users and require zero JavaScript. Browser support has matured significantly — all major browsers support date and time as of 2021. The week and month types have slightly weaker Safari support and may need a polyfill for production use.
checkbox and radio are the classic boolean and single-choice controls. Group radio buttons with the same name attribute so browsers know they are mutually exclusive. Always associate them with <label> elements for accessibility — either wrapping the input or using for and id to link them.
type="file" opens a file picker dialog. Use the accept attribute to hint at expected file types (e.g., accept="image/*" or accept=".pdf,.docx"). Add multiple to allow multiple file selection. Note that the file input's appearance is difficult to style — many developers use a visually hidden input paired with a styled label for custom designs.
submit, reset, and button create clickable controls. image renders an image that submits the form when clicked and also sends the click coordinates. hidden is invisible to users but submits data with the form — commonly used for CSRF tokens and tracking values. color renders a color picker swatch — a delightful modern addition that works without any JavaScript or external library.
Most input types share a core set of attributes: name (form submission key), value (default value), placeholder (hint text), required, disabled, readonly, autofocus, and autocomplete. Numeric and date types add min, max, and step. Text types add minlength, maxlength, and pattern. File inputs add accept and multiple.
Every input needs a programmatically associated label — either <label for="id"> or wrapping the input inside the label. Use aria-describedby to link error messages or hint text. Use aria-required="true" in addition to the HTML required attribute for maximum screen reader support. Avoid relying solely on placeholder for labeling — it disappears on focus and has insufficient contrast by default.