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.

Slider

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

Spinner

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

Placeholder

I think that this will be the most used one.

HTML Code:

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

References

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.