HTML5 Series 4 - Enhancements in Form elements

HTML5 also provides improved markup for applications: <datalist>, <progress>, <meter>, <details>, <summary>. We also have more descriptive link relations in HTML5. Link relation indicates the relationship between current page and the target page or some other section in the same page. Let's take a look at the code:

New input types in HTML5 for form:

datetime	year, month, day, hour, minute, second, fractions of a second. Encoded- ISO 8601. time zone-UTC.
datetime-local	Same but with no time zone.
date	date (year, month, day)
month	date consisting of a year and a month
week	date consisting of a year and a week number

time	time (hour, minute, seconds, fractional seconds)
number	only numerical value. The step attribute specifies the precision, defaulting to 1
range	contain a value from a range of numbers
email	accepts only email value. Format - email@example.com
url	Should contain a URL address. Format- http://www.example.com or http://example.com

This a new <output> element.

HTML5 also defines new attributes such as placeholder (Default water mark text in any input field), autofocus (Element can get focus as soon as page gets loaded), required (all the required fields should be filled before page post back). In addition to these attributes, it also defines new custom attributes. All these enhancements in attributes make our life as developer very easy. It reduced the javascript dependency which is a big plus.

Custom attribute:

<input type="tel" placeholder="(555) 555-5555" data-country="USA"

pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

"data-country" is defined as custom attribute. It can be accessed by following ways:

1. Dom functions: elementObj.getAttribute("data-subject")

2. Dataset: elementObj.dataset.subject [dataset is new in-built property defined for elements for holding all the custom data attributes]

Supported browser: Firefox 3.5+, Opera 10.5+,Chrome 6+, IE 9+

Form enhancements demo (You can view the source of this page for markup):
meter:

A+

Your score is: A+
progress:
working...
Download is: working...
progress:
3/4 complete
Goal is: 3/4 complete

required:

email:

date:

range:

search:

tel: telephone (with placeholder as (555) 555-5555)

color:

number:


New Output form field:

Enter a value :

Output: