Google+ Followers

4 Sep 2011

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: