Zero Signup ToolsFree browser tools

Developer Tools

HTML Input Types Reference

Searchable reference for every HTML5 <input type> with live demo, supported attributes, validation rules, autocomplete tokens, and copy-ready snippets.

22 of 22 types

Filter by family

Selected input type

Text type="text"

Text input

The default single-line text field. Accepts any character, no client-side semantic validation, and is the right pick when no more specific type fits.

Live demo

Interact with the control above to see how your browser handles this type natively, including the on-screen keyboard, picker UI, and visible affordances.

Field facts

When to use
Names, free-form short answers, identifiers, anything that does not match a more specific type. Pair with a pattern attribute for cheap custom validation.
Submitted value
A plain string of characters typed by the user.
inputmode hint
text

Useful attributes

  • valueInitial or controlled value.
  • placeholderHint shown when the field is empty.
  • maxlength / minlengthCap and floor on character count.
  • patternRegex validation for the value.
  • sizeVisible character width (CSS width usually beats this).
  • autocompleteHelp the browser autofill the field.
  • spellcheckToggle the browser's spell check.
  • readonly / disabledLock the value or disable interaction.
  • requiredReject empty submission.

HTML5 validation

  • required: must not be empty.
  • minlength and maxlength: enforce a character-count range.
  • pattern: must match the supplied regular expression (HTML5 partial-match anchored to whole string).

Notes and gotchas

  • If you want a numeric keypad on mobile but free-form input (no spinner), pair type=text with inputmode=numeric.
  • type=text is the fallback for any unknown type, so older browsers silently render unknown types as plain text.

HTML snippet

<label for="full-name">Full name</label>
<input id="full-name" type="text" name="fullName" placeholder="Jane Doe" autocomplete="name" required />

JSX snippet

<label htmlFor="full-name">Full name</label>
<input id="full-name" type="text" name="fullName" placeholder="Jane Doe" autoComplete="name" required />

Full reference table

Text input

  • type="text"

    Text

    9 attrs

  • type="email"

    Email

    6 attrs

  • type="password"

    Password

    5 attrs

  • type="search"

    Search

    4 attrs

  • type="url"

    URL

    4 attrs

  • type="tel"

    Telephone

    3 attrs

Numeric input

  • type="number"

    Number

    5 attrs

  • type="range"

    Range

    4 attrs

Date and time

  • type="date"

    Date

    3 attrs

  • type="time"

    Time

    2 attrs

  • type="datetime-local"

    Datetime local

    2 attrs

  • type="month"

    Month

    1 attrs

  • type="week"

    Week

    1 attrs

Choice and toggle

  • type="checkbox"

    Checkbox

    4 attrs

  • type="radio"

    Radio

    4 attrs

  • type="color"

    Color

    2 attrs

File upload

  • type="file"

    File

    4 attrs

Buttons

  • type="submit"

    Submit

    5 attrs

  • type="reset"

    Reset

    2 attrs

  • type="button"

    Button

    2 attrs

  • type="image"

    Image submit

    4 attrs

Hidden

  • type="hidden"

    Hidden

    2 attrs

Reference covers every standard HTML5 input type. Each demo renders a real input so you can interact with it the way an end user would. Pair with semantic labels, fieldsets, and the relevant autocomplete tokens to get accessible forms that browsers and password managers understand.

How to use

  1. Search for the type token (email, date), the label (Telephone, Datetime local), a supported attribute (pattern, accept), or a synonym (slider, picker). The detail card jumps to the top match.
  2. Use the family chips (Text input, Numeric input, Date and time, Choice and toggle, File upload, Buttons, Specialized, Hidden) to narrow the grid and the table.
  3. Read the detail card for the highlighted type. It shows when to use the type, the exact value that ends up in form data, the useful attributes, the validation rules, and the inputmode and autocomplete hints.
  4. Interact with the live demo to see how your browser handles the type natively (on-screen keyboard, picker UI, clear button, color picker, file dialog).
  5. Click Copy HTML or Copy JSX next to the snippet to paste a ready-to-use input element into your form. Use Copy table TSV to grab the full reference for offline use.

About this tool

HTML Input Types Reference is a searchable, copy-ready catalog of every standard HTML5 <input type="..."> value with a live, working demo of each one rendered on the page. Each entry shows the description and recommended use, the exact shape of the value the browser will submit, the most useful supported attributes (with one-line explanations of each), the HTML5 validation rules the type enables, the inputmode hint the spec recommends for soft keyboards, and the autocomplete tokens the spec and password managers expect. The detail card also shows browser-support notes and the common gotchas (locale-comma decimals being rejected by type=number, Firefox falling back to a text field for type=month and type=week, type=color having no alpha channel, the hidden field being trivially editable in DevTools), and gives you a copy-ready HTML snippet and a JSX snippet for each type so you can paste them straight into a form. Search by type token (email, date, range), label (Telephone, Datetime local), supported attribute (pattern, accept, multiple), or a synonym like slider or picker. Filter by family to narrow to text, numeric, date and time, choice, file, button, specialized, or hidden inputs. A combined reference table at the bottom of the page lists every entry grouped by family with a Copy table TSV button for offline use. All data is baked in at build time and search runs locally in the browser, so the page is fast and works offline. The reference covers the modern input types most developers actually need to remember, including the ones whose default UI varies by browser, the ones that require enctype=multipart/form-data, and the ones where autocomplete tokens decide whether the user's password manager fills the field. Useful for building accessible forms, picking the correct type for the keyboard a mobile user will see, choosing between current-password and new-password, deciding when to use type=text plus a pattern instead of type=email, and confirming the exact value the browser will submit.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Developer

HTML Entity Reference

Searchable HTML special character reference with named, decimal, and hex codes.

Open tool

Developer

HTML Formatter

Pretty-print and minify HTML with indent, wrap, and quote controls.

Open tool

Generator

HTML Boilerplate Generator

Build a clean HTML5 starter template with meta, OG, JSON-LD, and a CSS reset.

Open tool

SEO

Viewport Meta Tag Generator

Build the <meta name=viewport> tag with accessibility checks and presets.

Open tool

Generator

HTML Table Generator

Editable grid, plain or styled output, alignment, caption, borders, stripes, and live preview.

Open tool

Developer

Keyboard Event Tester

Live JavaScript KeyboardEvent inspector with key, code, keyCode, modifiers, and snippet generator.

Open tool

All toolsDeveloper Tools