Datalist
O elemento <datalist> em HTML permite associar uma lista de opções a um campo de entrada <input>.
Isso proporciona ao usuário sugestões enquanto ele digita, facilitando o preenchimento do campo com base em uma lista pré-definida.
É uma maneira eficiente de guiar o usuário sem restringir suas opções, já que ele pode tanto escolher um dos valores sugeridos quanto inserir um valor personalizado.
Da uma olhada nesse exemplo:
<label for="ice-cream-choice">Escolha um sabor:</label>
<!-- Aqui está o input que será preenchido pelo usuário. O atributo "list" referencia o id do datalist associado -->
<input list="ice-cream-flavors" id="ice-cream-choice"/>
<!-- Esta é a lista de valores que sugeriremos ao usuário conforme ele for digitando.
Vale lembrar que o usuário pode escolher um valor da lista ou digitar algo diferente. -->
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coco"></option>
<option value="Hortelã"></option>
<option value="Morango"></option>
<option value="Baunilha"></option>
</datalist>
❗Importante❗
Se você quiser limitar o usuário as opções pré-definidas, temos como opções:
- Usar o input . Essa opção é interessante se você preferir que o usuário escolha entre uma lista e não digite nada.
- Usar o javascript para validar o que o usuário digitou no input com base no datalist
Vou deixar aqui um exemplo do javascript validando o input que o GPT fez pra mim
<label for="ice-cream-choice">Escolha um sabor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="flavor" required />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coco"></option>
<option value="Hortelã"></option>
<option value="Morango"></option>
<option value="Baunilha"></option>
</datalist>
<!-- Span para exibir a mensagem de erro -->
<span id="error-message" style="color: red; display: none;">Por favor, escolha um sabor válido da lista.</span>
<script>
document.getElementById('ice-cream-choice').addEventListener('blur', function() {
const input = document.getElementById('ice-cream-choice');
const datalist = document.getElementById('ice-cream-flavors');
const errorMessage = document.getElementById('error-message');
const options = Array.from(datalist.options).map(option => option.value);
if (!options.includes(input.value)) {
errorMessage.style.display = 'inline'; // Exibe a mensagem de erro
input.value = ''; // Limpa o campo se o valor for inválido
} else {
errorMessage.style.display = 'none'; // Esconde a mensagem de erro se o valor for válido
}
});
</script>
Top comments (0)