Datalist Element

The <datalist> element in HTML is used to create a pre-defined list of options for an <input> element. It allows the user to select an option from a list of pre-defined options, while also giving them the ability to enter their own value if they choose to. The list of predefined values is hidden up to the moment a user starts to type in the associated text field. We combine <datalist> with id attribute and <input> with list attribute.

Overall, the <datalist> element can be a helpful way to provide a pre-defined list of options for users to select from, while still allowing them the flexibility to enter their own value if needed.

Example

When the user starts typing in the category input field, the browser will display the predefined categories from the datalist. If none of the options match the user's input, they can still type their own category. This allows the user to choose from a list and manually input a value if necessary.

• <label for="category">: labels the input field, indicating to the user that they should select or enter a product category;
• <input type="text" name="category" id="category" list="categories"/>: the input field where the user can either type a category or select from the available options. The list="categories" attribute links this input to the datalist with the ID categories;
• <datalist id="categories">: this contains a list of predefined product categories. These options will appear as suggestions when the user starts typing in the input field;
• <option value="...">: each option represents a product category in the list. The user can select one of these categories or type their own value if it doesn't match any of the options.