HTML5 introduces new Input Types that cover a wide range of input
scenarios. With the new input types web will now have better input control
and form validation. This article will discuss the new input types, their
usage and how they help in validation.
An HTML form is an integral part of any web application. A form on any web page allows a user to enter data and post it to the server. The server then processes the data and takes appropriate actions. Up until HTML5 became the standard for HTML, the forms supported very limited set of input controls on the form. The input controls that we know of so far are:
| Input Type | Description |
| Text | Simple text box allows single line of text input |
| TextArea | Text box which allows multiple lines of text input |
| Password | Simple text box allows single line if input exclusively for entering password, characters types are invisible |
| Checkbox | Check box used for multiple choice decision making |
| Radio | Radio buttons used for making single choice decision out of multiple choices |
| Select | Drop down list control which displays list of items to select |
| File | File select control for uploading file to server |
| Reset | A button when clicked restores the input controls to their default values |
| Submit | A button used to submit the form to server |
Not only were we limited in the input types available for practical purposes, but we also had to deal with the issue of validation, data formats, auto focus and error handling. Just imagine if you had to accept an Age from the user – the only way to do this is to include <input type=”text” /> control on the form and then write a JavaScript validation to make sure that the entry is a number. Wouldn’t it be cool if we don’t have to worry about this at all?
Well the HTML5 specifications come to our rescue. HTML5 has now introduced 13 new input types that are available to be used in a form. Also the specification now dictates that the browsers are responsible for performing some of the basic validation for e.g. required field and fire off a validation error message when the form is submitted. So in this article we will walk through all of the input types and see how they behave on desktop browser and on mobile devices.
Lohith works in the capacity of Developer Evangelist at Telerik, India and takes care of evangelism in South India. He's an active member and one of the leads for Bangalore DotNet User Group. He tweets:
@kashyapa
