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. Slider HTML: <input type="range" min=0 max=100 step=5 value=30 name="temp-slider"> Date Picker HTML: <input type="date"name="dt"> Spinner The step attribute's value determines by how much will the value be increased/decreased. HTML: <input type="number-spin" min="0" max="100" step="5" value="15"> Placeholder I think that this will be the most used one. HTML: <input name="fname" type="text" placeholder="Enter your first name"> Datalist This is very interesting, a combination of a text field and a select box. HTML: <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> Multiple File Selection No need for any third party uploaders, here is file input with multiple file selection. HTML: <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: <progress id="prog" max=100 value=45>45%</progress> Meter Shows a meter, similar to the progress bar. HTML: <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: <input type="color"> References https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5 http://diveintohtml5.info/detect.html
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.
