Wednesday, November 26, 2014

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.