Friday, 30 December 2011

HTML5 Form Element

<datalist> Element

The <datalist> element specifies a list of options for an input field.
The list is created with <option> elements inside the <datalist>.
To bind a <datalist> to an input field, let the list attribute of the input field refer to the id of the datalist:

Syntax:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://html5-demo.blogspot.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://css3-xhtml.blogspot.com" />
</datalist>

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3Schools" value="http://html5-demo.blogspot.com" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://css3-xhtml.blogspot.com" />
</datalist>
<input type="submit" />
</form>

</body>
</html>

No comments:

Post a Comment