Understanding HTML5 Input Types to Spice up your Forms

Understanding HTML5 Input Types to Spice up your Forms

By | March 10th, 2013
2 Comments on Understanding HTML5 Input Types to Spice up your Forms

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.


\related stories

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.

Go to Page: 1 2 3 4

Topics: , , , , , , , ,
Lohith Nagaraj
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: