One of the main design goals of HTML 5 is to reduce the dependency on third party libraries and plugins.HTML 5 includes many of the features which are commonly required by the client so that instead of relying on the client side frameworks and libraries we can directly use the HTML 5 native features.
One common requirement is to perform data validation at the client.Validation at the client side ensures that wrong data is not submitted to the web server.Since there is a round trip involved when the data is submitted to the web server so it is better to perform the validation at the client or browser.In the previous versions of HTML as there was no inbuilt validation support so we had to rely on third party libraries or we had to write custom logic for validation.
Since validation is such a common requirement HTML 5 supports validation by providing many new input type controls for different types of data such as email and date.Not only the new input type controls validate the user entered data they also render the appropriate html for the input controls.For example when the date input type is rendered it displays a calendar from which the user can select the date.
Following are some of the main input types introduced in HTML 5
New input types
HTML 5 includes many new input types.As we know the “input” element in HTML can be used for creating different type of input elements such textbox , checkbox ,radiobutton.
For example to render a textbox we use the following
<input type="text">
While for rendering a checkbox we write
<input type="checkbox">
Though textbox allows the user to freely enter any data but it also makes it necessary to perform validation of the user entered data.For example if the textbox expects the date value and user entered a string then our application logic will not work as expected or we would get an error.To prevent such problems it is better to perform the data validation at the client so that the user is immediately informed about the error.
HTML 5 introduces several input types for different types of data.Using these input types is relatively easy.We just need to set the type attribute of the input element.Some of the main input types introduced in HTML 5 are:
- number
- date
- search
- range
- url
- tel
One of the common requirements in web pages is to allow the user to enter his email address.As the email addresses has a well defined format so we were required to write regular expressions for performing the validation of email address or rely on some third party plugins .With the email input type we can easily validate if the entered text is a valid email address or not.Uer is informed immediately if he enters invalid email address.
To add the email field we set the type attribute to “email”
<input type="email" name="emailAddress">
If we enter non email value the email type will automatically display an error message and will not allow us to submit the form.In the above email field I have entered a string value so the form will not be submitted until email address is entered in the above field.
Number
Often we have the requirement to validate the numeric data.We can easily implement the numeric data validation in our web page using the number input type without writing any Javascript or jQuery code.
<input type="number" name="age">
We can also set the range for the numeric data by setting the min and max attributes.For example age should be between a particular range and cannot be a negative number .So we can set the min and max attributes as:
<input type="number" min="0" max="150" name="age">
Following field is rendered for the above html in chrome.
Date
Many times we want to restrict the user to enter only date values in a field.The “date” type can be used in such a scenario
<input type="date" name="birthdate">
date input type is specially useful as it displays a datepicker by default.This allows the user to select the date in proper format.
Their are other date time types as well :
- datetime Allows user to select date and time ,including the timezone.
- datetime-local Allows the user to select date and time ,without the timezone.
- time Allows the user to enter time.
More recent versions of the browsers support date time types and as higher versions of the browsers will be released most of the browsers will be supporting these types in future.
Search
Many times we need to allow the user to enter search keywords in a field.Search type is used in such a scenario.
To add the search field we set the type attribute to “search“.In Chrome and Safari a cross appears at the end of the searchbox to clear the input
<input type="search" name="search">
Range
Like the “number” type this is also a numeric type.We can give the option of visually selecting the numeric values using the “range” type which displays a slider which the user can drag to select a numeric value.
<input type="range" name="volume" min="0" max="10">
This is similar to volume control of a media player.
Url
Allows the user to enter the urls such as www.google.com
<input type="url" name="mainPage">
Tel
This is meant to hold a telephone number.
<input type="tel" name="usertel">
Below is the list of the browser and their support for the HTML 5 input types
| Firefox | Safari | Chrome | Opera | Internet Explorer | |
| 4+ | 5+ | 6+/10+ | 10.6+ | 10+ | |
| Tel | 4+ | 5+ | 6+ | 10.6+ | 10+ |
| Url | 4+ | 5+ | 6+/10+ | 10.6+ | 10+ |
| Number | 29+ | 5+ | 7+ | 9+ | 10+ |
| Date & Time | 38 | 8 | 43 | 29 | 11 |
| Range | 38 | 8 | 43 | 29 | 11 |
Leave a Reply