The latest version of HTML, viz. HTML5 brings in a lot of improvements & new feautres, and amongst those is the important one - form elements. HTML5 help you provide a rich user experience and layout with these new form elements.
Although HTML5 is far from being useful to the mass and only the latest versions of the popular web browsers support HTML5, some do support HTML5 partially, so be warned and don't skip a thorough testing before implementing any HTML5 feature on a production environment.
In this article we'll be looking at a few HTML5 form elements.
HTML5 brings a lot of new input types like email, url, range, color, telephone, date picker, progress bar etc. Some of these help in the new validation feature provided by HTML5, while other are UI improvements, let's look at a few interesting ones.
Slider
Date Picker
Spinner
The step attribute's value determines by how much will the value be increased/decreased.
Placeholder
I think that this will be the most used one.
Datalist
This is very interesting, a combination of a text field and a select box.
Multiple File Selection
No need for any third party uploaders, here is file input with multiple file selection.
Progress Bar
Here is a progress bar, no need for CSS to emulate a progress bar.
Meter
Shows a meter, similar to the progress bar.
Color Picker
This will bring up the system's color picker for you.
https://developer.mozilla.org/en/HTM...Forms_in_HTML5
http://diveintohtml5.info/detect.html
Although HTML5 is far from being useful to the mass and only the latest versions of the popular web browsers support HTML5, some do support HTML5 partially, so be warned and don't skip a thorough testing before implementing any HTML5 feature on a production environment.
In this article we'll be looking at a few HTML5 form elements.
Inputs in HTML5
HTML5 brings a lot of new input types like email, url, range, color, telephone, date picker, progress bar etc. Some of these help in the new validation feature provided by HTML5, while other are UI improvements, let's look at a few interesting ones.
Slider
HTML Code:
<input type="range" min=0 max=100 step=5 value=30 name="temp-slider">
HTML Code:
<input type="date"name="dt">
The step attribute's value determines by how much will the value be increased/decreased.
HTML Code:
<input type="number-spin" min="0" max="100" step="5" value="15">
I think that this will be the most used one.
HTML Code:
<input name="fname" type="text" placeholder="Enter your first name">
This is very interesting, a combination of a text field and a select box.
HTML Code:
<input name="my_website" id="my_website" type="url" list="my_website_list" > <datalist id="my_website_list"> <option value="http://www.go4expert.com" label="Code Expert"> <option value="http://whatanindianrecipe.com" label="Delicious Indian Recipes"> <option value="http://bestofperl.com" label="Best Of Perl"> </datalist>
No need for any third party uploaders, here is file input with multiple file selection.
HTML Code:
<input type="file" name="my_images" multiple="multiple" />
Here is a progress bar, no need for CSS to emulate a progress bar.
HTML Code:
<progress id="prog" max=100 value=45>45%</progress>
Shows a meter, similar to the progress bar.
HTML Code:
<meter min=0 max=100 value=43 optimum=100>43</meter>
This will bring up the system's color picker for you.
HTML Code:
<input type="color">
References
https://developer.mozilla.org/en/HTM...Forms_in_HTML5
http://diveintohtml5.info/detect.html
