About Me

Software Architect, Evangelist, Writer with passion for anything which is in bytes..

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.

No comments:
Write comments

Recommended Posts × +