The tag has been around a long time and supports a number of values for the “type” attribute (“text”, “checkbox”, “hidden”, etc.) HTML5 adds a number of new allowed values to the input type attribute. These are designed to capture specific types of input data. Allowed values are
For example, if you want the user to enter a color value, use the following markup:
<input type="color" name="MyColor">
In Chrome, this markup renders a button that, when clicked, displays the following popup, allowing users to select the color of their choice.
Some browsers render different controls for these input types. For example, Chrome renders a popup calendar for the date type and a color picker for the color type. Browsers that don’t support custom controls simply render a textbox.
The new Input types are a great way to make it easier for users to input data into your forms; to restrict user input based on the expected data use; and to validate form input.