HTML5 New Input Types
Input elements are very important for designing form. HTML5 has introduced several new input types. These new types offer input controls and validation in simpler manner.
In this article we have discussed about the following new HTML5 input types:
- date
- datetime
- datetime-local
- time
- month
- week
- color
- url
- tel
- number
- range
- search
Important point need to be remembered:
All these HTML5 input types are not supported by all web browsers. But hopefully all browsers will support these new input types in near future. Now if you use these input types in your HTML5 document and they are not supported by the web browser, then these are shown as regular text fields.
Input Type – date
HTML5 date type input element allows user to select a date. Presently date type is supported by Google Chrome, Opera and Safari web browsers.
Example:
Birthday: <input type="date" name="dob">
Input Type – datetime
HTML5 datetime type input element allows user to select a date with time (hour and minute). It always shows ‘UTC’ timezone which can’t be modified. Presently datetime type is supported by Opera and Safari web browsers.
Example:
Journey Start Date: <input type="datetime" name="journey_start_date">
Input Type – datetime-local
HTML5 datetime-local type input element allows user to select a date with time (hour and minute) for local timezone. It does not show any timezone. Presently datetime-local type is supported by Opera and Safari web browsers.
Example:
Birthday with Time: <input type="datetime-local" name="dob">
Input Type – time
HTML5 time type input element allows user to select a time (hour and minute). Presently time type is supported by Google Chrome, Opera and Safari web browsers.
Example:
Event Start Time: <input type="time" name="event_start_time">
Input Type – month
HTML5 month type input element allows user to select a month with year. Presently month type is supported by Google Chrome, Opera and Safari web browsers.
Example:
Birthday (month and year): <input type="month" name="dob">
Input Type – week
HTML5 week type input element allows user to select a week with year. Presently week type is supported by Google Chrome, Opera and Safari web browsers.
Example:
Event Week: <input type="week" name="event_week">
Input Type – color
HTML5 color type input element allows user to select a color from predefined color palate. Presently color type is supported by Google Chrome and Opera web browsers.
Example:
Select Color: <input type="color" name="pick_color">
Input Type – email
HTML5 email type input element is used to create input field which specifically takes an email address as value. It also provides default client-side email address validation. Presently email type is supported by latest versions of all web browsers except Safari.
Example:
Email Address: <input type="email" name="user_email">
Input Type – url
HTML5 url type input element is used to create input field which specifically takes a web address or URL as value. It also provides default client-side URL validation. Presently url type is supported by latest versions of all web browsers except Safari.
Example:
Website Address: <input type="url" name="website_address">
Input Type – tel
HTML5 tel type input element is used to create input field which specifically takes a telephone number as value. Unfortunately at present time no web browser supports tel type input element.
Example:
Phone Number: <input type="tel" name="phone_number">
Input Type – number
HTML5 number type input element is used to create input field which takes a numeric value. To enforce restrictions, the following attributes can be used:
- max – It specifies the maximum value that is allowed
- min – It specifies the minimum value that is allowed
- step – It specifies the legal number intervals
Presently number type is supported by latest versions of all web browsers except Firefox.
Example:
Age (from 1 to 18): <input type="number" name="age" min="1" max="18">
Input Type – range
HTML5 range type input element is used to create input field which takes a numeric value from a specified range of numbers. To enforce restrictions, the following attributes can be used:
- max – It specifies the maximum value that is allowed
- min – It specifies the minimum value that is allowed
- step – It specifies the legal number intervals
Presently range type is supported by latest versions of all web browsers except Firefox.
Example:
Marks (0 - 80): <input type="range" name="marks" min="0" max="80">
Input Type – search
HTML5 search type input element is used to create search field. It is quite similar to regular text type input element. Presently search type is supported by Google Chrome and Safari web browsers.
Example:
Search: <input type="search" name="search_field">
This is very good….
It is very nice. Can you provide sample website with all new input tags?
We have already provided examples for all new HTML5 input types. Please click on the “See Output” links.
I’m newbie and the tutorial is so helpful. Thanks!