Go4Expert (http://www.go4expert.com/)
-   Web Development (http://www.go4expert.com/articles/web-development/)
-   -   Ubercool HTML5 Forms (http://www.go4expert.com/articles/ubercool-html5-forms-t28808/)

pradeep 30Jul2012 18:51

Ubercool HTML5 Forms
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.

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.


HTML Code:

<input type="range" min=0 max=100 step=5 value=30 name="temp-slider">
Date Picker

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">

Multiple File Selection

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" />
Progress Bar

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>
Color Picker

This will bring up the system's color picker for you.

HTML Code:

<input type="color">



programming 1Sep2012 22:00

Re: Ubercool HTML5 Forms
Now that is really UberCool for all those jumping working on/with HTML5. I've gone through both the Reference URLs and have bookmarked them. Although I think I may require the one that informs about "Forms in HTML" (or more correctly HTML5) as I often have to work on such things. Grateful to you Pradeep.

All times are GMT +5.5. The time now is 16:09.