Elemento Datalist

O elemento <datalist> em HTML é utilizado para criar uma lista predefinida de opções para um elemento <input>. Ele permite que o usuário selecione uma opção de uma lista de opções predefinidas, ao mesmo tempo em que lhe oferece a capacidade de inserir seu próprio valor, caso prefira. A lista de valores predefinidos fica oculta até o momento em que o usuário começa a digitar no campo de texto associado. Combinamos <datalist> com o atributo id e <input> com o atributo list.

No geral, o elemento <datalist> pode ser uma forma útil de fornecer uma lista predefinida de opções para os usuários selecionarem, ao mesmo tempo que lhes permite a flexibilidade de inserir seu próprio valor, se necessário.

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.