Email field

You can add a field that only accepts email addresses:

<input type="email" />

If you add the required attribute, the browser automatically validates the email address (for its format: contains ”@”, has a domain, etc).

Password field

The password field lets you enter values that are obfuscated (not displayed on screen)

<input type="password" />

Numeric field

You can add a field that only accepts numbers

<input type="number" />

This field accepts the attributes:

• min minimum number
• max maximum number
• step step between values

Date picker

<input type="date" />

This field accepts the attributes:

• min minimum date one can choose in YYYY-MM-DD format (e.g. min='2025-01-01')
• max maximum date one can choose (e.g. max='2025-12-01')

Time picker

<input type="time" />

This field accepts the attributes:

• min minimum time one can choose (e.g. min='06:00')
• max maximum time one can choose (e.g. max='14:00')

Datetime picker

Combines date and time pickers in one

<input type="datetime-local" />

This field accepts the attributes:

• min minimum date one can choose in YYYY-MM-DDTHH:MM format (e.g. min='2025-01-01T06:00')
• max maximum date one can choose (e.g. max='2025-12-01T14:00')

Phone number

<input type="tel" />

URL

<input type="url" />

Color picker

<input type="color" />

Slider

<input type="range" />

This field accepts the attributes:

• min minimum number
• max maximum number
• step step between values

Other exist, but this is a good list to start with.

Lessons in this unit: