Form fields: Specialized input fields

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:

0: Introduction
1: Form submit field
2: ▶︎ Specialized input fields
3: Checkboxes
4: Radio buttons
5: File input fields
6: Textarea
7: Select
8: Autocompleting form fields
Want to learn more? Check out our courses