HTML5 Form Fields

In this post I'm going to write about HTML5 form fields. HTML5 has introduced a lot of input controls, which would otherwise been very tedious to code using javascript.


Note that if the browser does not support any of these controls, it would just render a plain text field.

1. Color Picker:
<input type="color"/>


2. Range slider
This input type displays a slider within min and max range of values.
<input type="range" min="10" max="80"/>

3. Date 
<input type="date"/>
4. Email
<input type="email"/>
5. URL 
<input type="url"/>

6. Datalist 
<input type="text" list="states"/>
 <datalist id="states"> 
        <option value="CA"> 
        <option value="TX"> 
        <option value="FL"> 
</datalist>
The datalist input type provides a suggestion list drop down while entering data in the text field.
7. Search 
<input type="search"/>
The search input type would provide a google search kind of look and feel with cross button.

Comments

Popular posts from this blog

Pivotal Cloud Foundry (PCF) Integration with Elastic Cloud Storage (ECS)

Restful code example using Spring MVC

Spring Integration - Bulk processing Example