HTML5 special Input Types


There are some new input types introduced for HTML forms.

These are:-

  1. color
  2. date
  3. DateTime-local
  4. email
  5. month
  6. number
  7. range
  8. search
  9. tel
  10. time
  11. url
  12. week

If a browser is not able to support these new input types, then the input would behave as
<input type=”text”>.


Input Type for Color

You can define an input field for color by using this property, a field for picking and entering color by
<input type=”color”>

A color picker can show up in the input field, and its property can vary from browser to browser

 <form >
    Select your favorite color:
    <input type="color" name="favcolor" >

You should able to see the color selector after clicking the box, after the line

“select your favorite color:”

The color picker is different for every browser

Input Type for Date

If you want to make a field, which can enter or make the user select a date then you should use this date input type in your HTML form. You can define a date by using
<input type=”date”>

A date picker can show up in the input field, and its property can vary from browser to browser

<form >
    Select your date of birth:
    <input type="date">

Input Type for DateTime-local

You can also define a local date-time input field with no fixed or current time zone.

A date picker can show up in the input field, and its property can vary from browser to browser

<form >
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">

Input Type for Email

To defining a field, which can contain a proper email you can use <input type=”email”> in HTML forms

An Email address can be validated on its own, and rest of its property can vary from browser to browser

  <input type="email" name="email">


Input Type for Month

If you want to make a select of a month or a year then you could define a special field for that purpose by using
<input type=”month”> 

A date picker can show up in the input field, and its property can vary from browser to browser

Input Type Number

You can also define a special field which can only contain numbers and none of the alphabet nor the symbols can be valid in this input field. You can also set restrictions on what numbers are accepted.

you can enter a value from 1 to 10 by setting these restrictions.

<form >
  Numbers (between 1 to 10):
  <input type="number" name="quantity" min="1" max="5">