Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The New HTML5 Datalist Element

DZone's Guide to

The New HTML5 Datalist Element

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

The HTML5 <datalist> element specifies a list of pre-defined options for an <input> element and it works like an “autocomplete” feature for users :
<!DOCTYPE html>
<html>
<body>

<form action="login.php" method="post">
User:
<input list="username" name="username" />
<datalist id="username">
  <option value="Aaron">
  <option value="Rafael">
  <option value="Cale">
  <option value="Eddie">
  <option value="Valentin">
</datalist>
Password:
<input type="password" />
<input type="submit" value="Login" />
</form>

</body>
</html>

And the output will be:

 
 
The <datalist> tag is currently supported in Firefox and Opera. We can just hope that other browsers will soon support this great feature.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of A. Programmer. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}