HTML5 form input types

HTML5 offers many new input types which were not available in previous versions. Smart phones and tablets have limited screen real estate and the interfaces need to be sensitive to touch which requires more space than a mouse pointer. These interfaces require users to switch between keyboards to input characters. HTML5 forms allow web designers to make their sites more user-friendly by offering preselected keyboard such as a date picker for date field, @ and . symbols in the keyboard for emails, and numeric keyboard for numbers. The best part is that it is as easy as typing one word to offer different keyboards.

<input type="text">
<input type="date">
<input type="email">
<input type="tel">

The first field is for any text, the second is for dates, the third is for emails, and the last one will offer keyboard suitable for telephone numbers. Following are commonly use HTML5 input types"

input type description
color color picker
email provides @ and . symbols
date suitable for specifying dates
datetime suitable for specifying date and time without timezones
number numeric keyboard
password typing passwords, does not show what is typed
range to specify numeric range
search for search field
tel suitable for typing phone numbers
text simple text field
time suitable for typing time without timezones
url suitable for typing url e.g. http://, ftp://, mailto:// buttons
Technology: