HTML5: Creating autocomplete using <datalist>

Datalist is quite similar to drop down select menu.  It is supported in major browsers except Safari.

It is used to provide a predefined list of options making the process of creating a list seems like an autocomplete form.
 
Codecrawl.com: Datalist
Users don’t necessarily have to choose from the predefined options; they can type their own answer if they wanted.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Datalist</title>
</head>
<body>
<label for='band_id'>What's your favourite rock band?</label>
<input list='bandlist' type='text' id='band_id' name='band' />
<datalist id='bandlist'>
    <option label='Oasis' value='Oasis' />
    <option label='Metallica' value='Metallica' />
    <option label='Poison' value='Poision' />
    <option label='Whitesnake' value='Whitesnake' />
</datalist>
</body>
</html>

In the above list, if you type wh in the input box, a prompt, whitesnake will be shown on the screen.

Series Navigation<< HTML5: Placeholder text in a form
HTML5: Progress bar >>