Input Types

HTML5 input types like date , color , range , and email give the browser the right keyboard, picker, and built-in validation for each kind of data, so you write less JavaScript and users get a better experience.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

HTML5 input types are like specialised tools. A text input is a Swiss Army knife — works for everything but nothing perfectly. A type="date" input is a calendar. A type="color" is a paint palette. Using the right input type gives users the best native controls for each data type.

Try every HTML5 input type in one interactive demo.

Build beautiful custom controls using only CSS — no JavaScript needed.

You can now use and style every HTML5 input type:

Practice quiz

Which input type shows a native calendar date picker?

  • type="text"
  • type="date"
  • type="calendar"
  • type="day"

Answer: type="date". type="date" gives the browser a built-in calendar picker, and "calendar"/"day" are not real input types.

On a mobile device, which input type brings up the numeric phone keypad?

  • type="number"
  • type="phone"
  • type="tel"
  • type="digits"

Answer: type="tel". type="tel" is for telephone numbers and triggers the numeric phone keypad on mobile.

What does the <datalist> element provide for an input?

  • A dropdown that forces one of its values
  • Autocomplete suggestions while still allowing free text
  • A multi-select list
  • Client-side form validation

Answer: Autocomplete suggestions while still allowing free text. <datalist> offers suggested values for autocomplete but the user can still type any value, and it degrades to a plain text input.

Which input type renders a slider control?

  • type="slider"
  • type="range"
  • type="number"
  • type="scroll"

Answer: type="range". type="range" produces a slider whose value is between its min and max.

Which input type opens a color picker?

  • type="color"
  • type="hex"
  • type="paint"
  • type="rgb"

Answer: type="color". type="color" shows the native color picker and its value is a hex color like #3b82f6.

Which attributes set the bounds and step of a number or range input?

  • low, high, by
  • start, end, gap
  • min, max, step
  • from, to, increment

Answer: min, max, step. min and max bound the value and step controls the increment for number and range inputs.

To make a hidden native checkbox still toggle when you click your custom control, you should keep the input inside which element?

  • A <span>
  • A <label>
  • A <button>
  • A <fieldset>

Answer: A <label>. Wrapping the input in a <label> means clicking the label (and your custom control) still toggles the real input.

In the toggle-switch pattern, which CSS combinator styles the slider when the checkbox is checked?

  • .toggle-input:checked > .toggle-slider
  • .toggle-input:checked + .toggle-slider
  • .toggle-input:checked .toggle-slider
  • .toggle-slider:checked

Answer: .toggle-input:checked + .toggle-slider. The adjacent sibling combinator (+) targets the .toggle-slider that immediately follows the checked input.

Which input type adds URL validation and a ".com"-style keyboard on mobile?

  • type="link"
  • type="web"
  • type="url"
  • type="href"

Answer: type="url". type="url" validates that the value looks like a URL and offers a URL-friendly keyboard.

Why prefer type="email" over type="text" for an email field?

  • It encrypts the value
  • It gives an email keyboard and built-in email validation
  • It hides the typed characters
  • It auto-submits the form

Answer: It gives an email keyboard and built-in email validation. type="email" surfaces the right mobile keyboard and lets the browser validate the format automatically.