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"
|provides @ and . symbols|
|date||suitable for specifying dates|
|datetime||suitable for specifying date and time without timezones|
|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|