Conteúdo do Curso
HTML Definitivo
HTML Definitivo
Usando o Elemento Datalist para Sugestões de Entrada Predefinidas
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 da lista, mas também oferece a possibilidade de digitar um valor próprio, caso deseje. A lista de valores predefinidos permanece oculta até que o usuário comece a digitar no campo de texto associado. O <datalist>
é associado a um atributo id
, e o <input>
é vinculado a ele utilizando o atributo list
.
index.html
De modo geral, o elemento <datalist>
pode ser uma forma útil de fornecer uma lista predefinida de opções para seleção dos usuários, mantendo a flexibilidade para que eles insiram um valor próprio, se necessário.
Exemplo
Quando o usuário começa a digitar no campo de entrada category, o navegador exibirá as categorias predefinidas do datalist
. Se nenhuma das opções corresponder ao que o usuário digitou, ele ainda poderá inserir sua própria categoria. Isso permite que o usuário escolha de uma lista e insira manualmente um valor, se necessário.
index.html
<label for="category">
: rotula o campo de entrada, indicando ao usuário que ele deve selecionar ou inserir uma categoria de produto;<input type="text" name="category" id="category" list="categories"/>
: campo de entrada onde o usuário pode digitar uma categoria ou selecionar entre as opções disponíveis. O atributolist="categories"
vincula este campo aodatalist
com o IDcategories
;<datalist id="categories">
: contém uma lista de categorias de produto predefinidas. Essas opções aparecerão como sugestões quando o usuário começar a digitar no campo de entrada;<option value="...">
: cadaoption
representa uma categoria de produto na lista. O usuário pode selecionar uma dessas categorias ou digitar seu próprio valor caso não corresponda a nenhuma das opções.
1. Qual elemento HTML é utilizado para criar uma lista suspensa com múltiplas opções?
2. Qual é a finalidade do elemento datalist
?
3. Qual atributo é utilizado para vincular um elemento datalist
a um elemento input
?
Obrigado pelo seu feedback!