10 Jul HTML5 datalist Tag
The HTML5 datalist tag provides a set of option elements. Under these, you can add a set of predefined values. It works like an auto-complete feature, which shows the predefined options.
Here’s an example showing the options added as countries name. While searching under the input type box, it shows the available values, which we predefined as “USA”, “UK”, “India”, “Australia”, etc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Understanding HTML5 Datalist tag</title> </head> <body> <label>Select a country: <input list="countries" name="country" /> </label> <datalist id="countries"> <option value="USA"> <option value="UK"> <option value="India"> <option value="Australia"> </datalist> </body> </html> |
Here’s the output, we have provide autocomplete option for users. On typing a character it matches the first characters of the predefined options i.e. countries here,
No Comments