HTML5 has introduced plenty of new HTML input types that you can use with your webpages. The New HTML Input Types in HTML5 can be used in your websites to provide advanced functionality, interactivity, and speed to your web design by making it even easier than before. This article highlights these new input types.

1. Color

Color input type provides a visual interface to choose a color, Using this input type users can select the color by pointing to the color or by providing color RGB values or Hex values.

<input type="color" />

2. Date

If you want to add a date picker to your website, this attribute can be used there. Date input type provides a visual interface to choose dates from calendars easily.

<input type="date" />

3. DateTime-Local

If you want to add a feature to select the date and time to your website, using this new datetime-local HTML5 input type, the users can specify both date and time in the local time zone.

<input type="datetime-local" />

4. Url

Using URL HTML5 input type, you can accept URL in the form, This field gives an error if the input is not URL.

<input type="url" />

5. Number

This type of input field accepts only numeric values, we can set min and max range in this field to restrict the user from entering out of boundary values.

<input type="number" min="20" max="100" />

6. Email

This input type can be used to accept only email in the form, You won't have to write JavaScript to check if the user has entered email or not.

<input type="email"/>

7. Range

The range input type provides a visual interface for the slider to choose the value between the range. We can specify the min and max

If you have to accept the fixed range values and provide a good experience to the user, this new HTML5 input type can be used for that feature.

<input type="range" min="1" max="100"/>