HTML5
brings several new input types for forms. The idea of these new types
is that the user agent can provide the user interface, such as a
calendar date picker or integration with the user’s address book, and
submit a defined format to the server.
It gives the user a better experience as his input is checked before
sending it to the server meaning there is less time to wait for
feedback.
HTML5 adds a few new values for the input element’s type attribute:
- tel
- url
- number
- range
- date
- month
- week
- time
- datetime
- datetime-local
- search
- color
Now let’s take a closer look at each input type.
Input type “tel”
The desktop browsers display a text box for the tel type.
The mobile browsers, like mobile Safari on the iPhone and iPad will display the number keypad to enter this form data rather than the alphabet keyboard.
Input type “email”
The “email” type input field should contain an email address.
The email address will be validated on submit.
The desktop browsers display a text box for the email type.
The mobile browsers, like mobile Safari change the input interface for this field to make it easier to use on small devices.
The email address will be validated on submit.
The desktop browsers display a text box for the email type.
The mobile browsers, like mobile Safari change the input interface for this field to make it easier to use on small devices.
Input type “url”
The “url” type input field should contain an email address.
The url address will be validated on submit.
The desktop browsers display a text box for the url type.
The mobile browsers, like mobile Safari change the input interface for this field to make it easier to use on small devices.
The url address will be validated on submit.
The desktop browsers display a text box for the url type.
The mobile browsers, like mobile Safari change the input interface for this field to make it easier to use on small devices.
Input type “number”
The number type is used for input fields that contain numeric values.
The developer can set limitations on the number accepted by using min, max and step.
The developer can set limitations on the number accepted by using min, max and step.
Attributes supported:
min – minimum number value accepted
max – maximum number value accepted
step – valid number intervals (step=”2″ specifies only -2, 0 2 … are valid values)
value – default value
max – maximum number value accepted
step – valid number intervals (step=”2″ specifies only -2, 0 2 … are valid values)
value – default value
Input type “range”
The range type is used for input fields that contain a value from a range of numbers.
The range type is going to be displayed as a slider bar.
The range type is going to be displayed as a slider bar.
Attributes supported:
min – minimum number value accepted
max – maximum number value accepted
step – valid number intervals (step=”2″ specifies only -2, 0 2 … are valid values)
value – default value
min – minimum number value accepted
max – maximum number value accepted
step – valid number intervals (step=”2″ specifies only -2, 0 2 … are valid values)
value – default value
Input type “date”
Input type “month”
Input type “week”
Input type “time”
Input type “datetime”
Input type “datetime-local”
Input type “search”
The search input type field behaves like a regular text field.
The Chrome browser allows only hex values.
The Opera browser will display a color picker for the user to select the desired color.
