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 error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}