Next gen HTML inputs have arrived

Mastering the different types of HTML input elements is your ticket to building forms that users love. From text and passwords to sliders and color pickers, each <input> type adds unique functionality that makes forms more intuitive and engaging — and most developers are only using a fraction of what's available.

Why input types matter

The type attribute on an <input> element does three things at once: it controls the UI widget the browser renders, the keyboard it shows on mobile, and the built-in validation it applies before submission. Picking the right type is free UX — no JavaScript required.

A date field typed as text forces users to remember your date format. The same field typed as date gives them a native date picker, validates the format automatically, and on mobile shows a date-optimized keyboard. That's a significant improvement with one word changed.

Text-based inputs

text

The default. Accepts any single-line string. Use it when no more specific type fits.

<input type="text" name="username" placeholder="Your name" />

password

Identical to text but masks the characters. Browsers offer to save and autofill passwords for this type. Always use it for credentials — never mask a password field manually with CSS.

<input type="password" name="password" autocomplete="current-password" />

search

Semantically marks the field as a search input. Browsers render a clear (×) button when the field has content, and on iOS show a "Search" key on the keyboard instead of "Return". It also integrates with browser search history in some implementations.

<input type="search" name="q" placeholder="Search something..." />

Numeric inputs

number

Renders a spinner with up/down arrows and rejects non-numeric input. On mobile, opens a numeric keyboard. Use min, max, and step to constrain the range.

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

One gotcha: number strips leading zeros and rejects values like "1e" silently in some browsers. For fields where the format matters more than the numeric value (ZIP codes, credit cards), use type="text" with inputmode="numeric" instead.

<!-- Better for ZIP codes — numeric keyboard, no spinner, preserves leading zeros -->
<input type="text" inputmode="numeric" pattern="[0-9]{5}" name="zip" />

range

Renders a draggable slider. Perfect for settings where the exact value matters less than the relative position — volume, brightness, price filters. Combine with an <output> element to display the current value.

<label for="volume">Volume</label>
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="5"
  value="50"
  oninput="this.nextElementSibling.value = this.value"
/>
<output>50</output>

Date and time inputs

date

Opens a native calendar picker. Validates that the value is a real date and formats it as YYYY-MM-DD in the submitted data regardless of what the user sees. Use min and max to restrict the selectable range.

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

time

Renders a time picker (hours and minutes, optionally seconds). Value format is HH:MM in 24-hour notation regardless of the locale display. Useful for booking systems and scheduling tools.

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

week

One of the lesser-known types. Lets users pick a specific week of a year — the value is formatted as YYYY-W##. Genuinely useful for HR and project management tools where work is planned by week.

<input type="week" name="sprint" />
<!-- Submitted value: "2026-W17" -->

Selection inputs

checkbox

For toggling a boolean value or selecting multiple items from a group. Group related checkboxes under a <fieldset> with a <legend> for proper accessibility.

<fieldset>
  <legend>Interests</legend>
  <label><input type="checkbox" name="interest" value="design" /> Design</label>
  <label><input type="checkbox" name="interest" value="dev" /> Development</label>
</fieldset>

radio

For selecting exactly one option from a group. All radios in a group share the same name. Unlike checkboxes, once a radio is selected you cannot deselect it — only switch to another option in the group.

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free" /> Free</label>
  <label><input type="radio" name="plan" value="pro" checked /> Pro</label>
</fieldset>

Special inputs

color

Opens the OS color picker. The submitted value is always a hex color string like #7c3aed. Great for customization UIs, theme builders, and design tools — no JavaScript color picker library required.

<input type="color" name="brand_color" value="#fcdc49" />

file

Opens the OS file browser. Use accept to restrict file types and multiple to allow multi-file selection. The value cannot be set programmatically for security reasons.

<input type="file" name="avatar" accept="image/png, image/jpeg" />
<input type="file" name="docs" accept=".pdf,.docx" multiple />

submit

Renders a button that submits the form. Functionally equivalent to <button type="submit">, but <button> is more flexible since it can contain HTML. Prefer <button> in most cases.

<!-- Prefer this -->
<button type="submit">Send message</button>

<!-- Over this -->
<input type="submit" value="Send message" />

Best practices

• Always pair inputs with labels. Use <label for="id"> or wrap the input inside the label. Placeholder text is not a substitute.
• Use autocomplete attributes. autocomplete="email", autocomplete="name", etc. let browsers autofill correctly and are required for WCAG 1.3.5 compliance.
• Set inputmode independently of type. inputmode="decimal" shows a decimal keyboard on mobile without the constraints of type="number".
• Don't rely solely on browser validation. Native validation is a UX enhancement, not a security measure. Always validate on the server.
• Test on mobile. The keyboard each type triggers is often the most impactful thing about choosing the right type — test it on an actual device.

The browser does a lot of the heavy lifting when you use the right input type. Less JavaScript, better accessibility, and a more native feel — for free.

← All articles  ·  Portfolio