New form attributes in HTML5

Today we are focusing on new form elements that came bundled with HTML5.
It is our humble beginning of our Tutorials on HTML5, in the future we are aiming to build it more comprehensive.

Learning HTML5
Learning ABC of HTML5

What is HTML5?

HTML5 is the latest version of Hypertext Markup Language, a standard programming language for describing the contents and appearance of Web pages.HTML5 has been designed to boost things online without requiring additional software such as browser plugins. It is involved everywhere from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.

HTML5 is the novel specification for HTML, the language that web browsers interpret to display web pages. HTML5 has introduced new features intended to create websites easier and to improve user experience.
It has enhanced web forms features by ushering in new elements.

New Web Form Elements

1) <datalist>: Representation of  predefined options for other controls.
2) <keygen>: Representation of key-pair generator.
3) <output>: Representation of the result of a calculation .
4) <progress>: Representation of the completion progress of a task.
5) <meter>: Representation of a scalar measurement (or a fractional value), within a known range.


In this post, we are targeting  <datalist>

<datalist> Element:

It comprises a predefined list of options for other form controls. It works in a similar way to the browser search box that provides options as you type (autocomplete).
Use the <input> element’s list attribute to bind it together with a <datalist> element.
Code:-

Code for Datalist in HTML5
HTML code for Datalist

Output:-


DataList Result in HTML5
DataList Result


Working Demo

The <datalist> tag also supports the GlobalAttributes and the Event Attributes in HTML.

Key Points:

1)Dropdown list will appear populated by the options provided in the <datalist> when :
              a) The input with a list attribute matches the id with <datalist> element
              b) Comes into focus
              c) Double clicked or while entering data
2) One <datalist> can be referenced by an unlimited number of input elements.
3) <datalist> should have zero or more <options>. Children are not valid.
4) If <datalist> is not supported by a browser, it will not show the options. Options will be  shown only if wrapped in <select>.

Browser Compatibility

Browser
Version
Chrome
20.0
Firefox
4.0
Internet Explorer
10
Opera
9.5
Safari
Not Supported



Leave a Reply

Your email address will not be published. Required fields are marked *