New form attributes in HTML5 – User friendly Tech help

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

n

n

n

n

n

n

n

n

Learning ABC of HTML5

n

What is HTML5?
n
nHTML5 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.
n
nHTML5 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.
nIt has enhanced web forms features by ushering in new elements.
n
nNew Web Form Elements

n

1) : Representation of  predefined options for other controls.

n

2) : Representation of key-pair generator.

n

3) : Representation of the result of a calculation .

n

4) : Representation of the completion progress of a task.

n

5) : Representation of a scalar measurement (or a fractional value), within a known range.
n
n

n

In this post, we are targeting  
n

n

Element:
n

n

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).
nUse the element’s list attribute to bind it together with a element.

n

Code:-

n

n

n

n

n

n

n

n

HTML code for Datalist

n

Output:-

n
n

n

n

n

n

n

n

n

DataList Result

n

nWorking Demo
n

n

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

n

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

n

Browser Compatibility
n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

n

Browser

n

n

Version

n

n

Chrome

n

n

20.0

n

n

Firefox

n

n

4.0

n

n

Internet Explorer

n

n

10

n

n

Opera

n

n

9.5

n

n

Safari

n

n

Not Supported

n

Was this article helpful?
YesNo

Similar Posts