The <input> element is not a new element in HTML5, but deserves a special page because the HTML 5 has introduced new input types. The original input types were explained in the HTML 4.01 tutorial, while here we will briefly go through new types and enforce it with an example at the end of the chapter.
The list below shows all new types allowed to be assigned to an input element:
The type="color" is used to allow user inputs that contain a color. If a browser supports this type, it may show a color picker for a user to choose from.
<input type="color" name="incolor" />
The type="number" is used to allow user inputs to enter a number to the input field; all other characters should be rejected by the browser. A cool thing about this type is that, if browser supports it, we can put a restriction on the user's input. More about the input tag's attributes in the next topics, but here is the list of those restrictions that may be interesting to apply to an input type number:
The attribute min sets the minimum number to be entered, the attribute max a maximum number, and the attribute step sets the step increment (interval) of the number.
<input type="number" name="innumber" min="1" />
The type="range" is used to set the range in which a user's value should be (could be) inserted. Browsers that support this type, usually present in in a form of a slider.
<input type="range" name="inrange" min="1" max="10" />
The type="tel" is used to allow only telephone numbers.
<input type="tel" name="intel" />
The type="email" is used to prevent a user entering anything but an e-mail format input.
<input type="email" name="inemail" />
The type="url" allows users to enter an url valid input, while preventing them from entering other formats.
<input type="url" name="inurl" />
The type="search" is a text field that may be used as a regular search form. However as it is not well supported, we still need to use other search scripts or engines.
<input type="search" name="insearch" />
The type="date" is used to enter a date only into an input field. A standard day picker may be shown instead of the standard text field, depending of the browser being used.
<input type="date" name="indate" />
The type="time" is used to select a regular time (without time zone). As before, depending on the browser, a time picker may be shown in the place of the text field.
<input type="time" name="intime" />
The type="datetime" is used to select a date and time, with the time zone included.
<input type="datetime" name="indatetime" />
The type="datetime-local" does everything the same as a datetime with exception that it is in a local format not including the time zone.
<input type="datetime-local" name="indatetimelocal" />
The type="week" allows us to select a week and a year. Depending of a browser, it too may show some sort of a date picker in the place of the input field.
<input type="week" name="inweek" />
The type="month" allows us to select a month and a year. Again, depending of a browser it may show a date picker instead of a regular text field.
input type="month" name="inmonth" />
The example with all HTML5 input types: