HTML5 Input Types
HTML5 brings more than twelve new input types for form. These input type makes development life easier while delivering a delightful user experience. Using HTML5 you don't need to worry about writing custom validation to check some inputs like email, URL, number, range, phone number etc. HTML5 introduced new input types, you can use these types in your web form and it will take care for you.
In this tutorials you will learn step by step each HTML5 input type and explain why you should be using them right now. The new input types we'll be looking at are listed below:
HTML5 Input Types
| Tag Name | Description | Browser Supported | |||||
|---|---|---|---|---|---|---|---|
| Color | This is used as Color selector, which could be represented by a wheel or swatch picker |
| |||||
| Date | Selector for calendar date |
|
|||||
| Datetime-Local | Date and time display, with no setting or indication for time zones |
|
|||||
| Datetime | Full date and time display, including a time zone. |
|
|||||
| Input type should be an email. |
|
||||||
| Month | Selector for a month within a given year |
|
|||||
| Number | A field containing a numeric value only |
|
|||||
| Range | Numeric selector within a range of values, typically visualized as a slider |
|
|||||
| Search | Term to supply to a search engine. For example, the search bar atop a browser. |
|
|||||
| Tel | Input type should be telephone number. |
|
|||||
| Time | Time indicator and selector, with no time zone information |
|
|||||
| URL | Input type should be URL type. |
|
|||||
| Week | Selector for a week within a given year |
|
To know more details about each input type, click on input type given in above table.
