The type attribute on <input> determines which of the many available form controls it renders — text, email, password, number, date, file, and dozens more.

Syntax

<input type="email">
<input type="date">
<input type="range" min="0" max="100">

Deep Dive Course

HTML5 expanded `<input>`'s **`type`** attribute far beyond the original handful (`text`, `password`, `checkbox`, `radio`, `submit`) to include purpose-built types like `email` (validates @ format, shows an email keyboard on mobile), `tel` (phone keypad), `number` (numeric input with min/max/step), `date`/`time`/`datetime-local` (native date/time pickers), `range` (a slider), `color` (a color picker), `file` (file uploads), and `search` (styled/behaves like a search box, often with a clear button). Browsers that don't recognize a given type simply fall back to rendering it as `type="text"`.

1Understanding INPUT Types

HTML5 expanded <input>'s `type` attribute far beyond the original handful (text, password, checkbox, radio, submit) to include purpose-built types like email (validates @ format, shows an email keyboard on mobile), tel (phone keypad), number (numeric input with min/max/step), date/time/datetime-local (native date/time pickers), range (a slider), color (a color picker), file (file uploads), and search (styled/behaves like a search box, often with a clear button). Browsers that don't recognize a given type simply fall back to rendering it as type="text".

💡

Because unsupported types gracefully fall back to plain text input, it's always safe to use a newer, more specific type — worst case, an old browser just shows a normal text field instead of erroring out.

editor.html

<input type="email" name="email" placeholder="you@example.com">
<input type="date" name="birthday">
<input type="color" name="theme">

localhost:3000

2Practical Example

Here is a real-world application of INPUT Types showing how it is used in production HTML.

editor.html

<!-- A range slider with a visible numeric readout -->
<input type="range" id="volume" min="0" max="100" value="50">
<output for="volume">50</output>

localhost:3000

3Best Practices

Follow these guidelines when working with INPUT Types:

1. Pick the most specific type available for the data being collected (email, tel, number, date, url)

2. Rely on the type's built-in validation and mobile keyboard optimization instead of reinventing it with JavaScript

3. Test how a given type actually renders across browsers/devices — visual presentation (e.g. date pickers) varies more than with plain text fields

⚠️

Tip: Because unsupported types gracefully fall back to plain text input, it's always safe to use a newer, more specific type — worst case, an old browser just shows a normal text field instead of erroring out.

editor.html

<input type="email" name="email" placeholder="you@example.com">
<input type="date" name="birthday">
<input type="color" name="theme">

localhost:3000

Examples

Example 01Basic Usage

<input type="email" name="email" placeholder="you@example.com">
<input type="date" name="birthday">
<input type="color" name="theme">

Example 02Advanced Example

<!-- A range slider with a visible numeric readout -->
<input type="range" id="volume" min="0" max="100" value="50">
<output for="volume">50</output>

Best Practices

Pick the most specific type available for the data being collected (email, tel, number, date, url)
Rely on the type's built-in validation and mobile keyboard optimization instead of reinventing it with JavaScript
Test how a given type actually renders across browsers/devices — visual presentation (e.g. date pickers) varies more than with plain text fields

Interview Question

What happens if a browser doesn't support a specific <input> type, like type="color" on a very old browser?▼

Hint: Think about HTML's general philosophy of graceful degradation for unrecognized attribute values.

Browsers that don't recognize a given input type simply treat it as type="text" instead of throwing an error or breaking the page — this is HTML's built-in graceful degradation. The user just gets a plain text field rather than the specialized picker/control, so the form still functions (the value is still submitted as plain text), just without the enhanced UI or built-in validation that the specific type would have provided.

Exercises

EasyPractice using INPUT Types in a real scenario.

View Solution

<input type="email" name="email" placeholder="you@example.com">
<input type="date" name="birthday">
<input type="color" name="theme">

Frequently Asked Questions

What happens if a browser doesn't support a specific <input> type, like type="color" on a very old browser?▼

Related Functions

input-tagINPUT Attributes