With the advent of HTML5, the web form feature has undergone a sea change. Many of the existing and previously much-used elements have been upgraded to have more muscle and lend more control to the designer. HTML5 form features have the potential of reducing the usage of JavaScript for form related functionality like validation, by a big margin. But alas, support for many of these new features have limited browser support currently. There are workarounds nevertheless. The best thing about most of these features

HTML5 defines over a dozen input types for the element that can enhance forms by offering more input control and validation logic that is native to the browser. Here is a list of the new set of input types:

1.

<input type="search">

for search boxes
2.

<input type="number">

for spinboxes
3.

<input type="range">

for sliders
4.

<input type="color">

for color pickers
5.

<input type="tel">

for telephone numbers
6.

<input type="url">

for web addresses
7.

<input type="email">

for email addresses
8.

<input type="date">

for calendar date pickers
9.

<input type="month">

for months
10.

<input type="week">

for weeks
11.

<input type="time">

for timestamps
12.

<input type="datetime">

for precise, absolute date+time stamps
13.

<input type="datetime-local">

for local dates and times

Additional features
Placeholder text

Placeholder text in input fields is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.

<form>
<input name="searchbox" placeholder="Enter keywords">
<input type="submit" value="Search">
</form>

Autofocus fields

Used to focus on a field automatically.

<form>
<input name="searchbox" autofocus>
<input type="submit" value="Search">
</form>

Good thing about most of these features is that browsers that do not support them simply ignores them and treats the associated input field as a regular one.

Latest posts by Smarajit Dasgupta

  • Share/Bookmark