Formulário HTML: Opção Select vs Opção Datalist

Eu queria saber quais são as diferenças entre Select-Option e Datalist-Option. Existe alguma situação em que seria melhor usar um ou outro? Um exemplo de cada um a seguir:

Select-Option

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Pense nisso como a diferença entre um requisito e uma sugestão. Para o selectelemento, o usuário deve selecionar uma das opções que você deu. Para o datalistelemento, é sugerido que o usuário selecione uma das opções que você forneceu, mas ele pode realmente inserir o que quiser na entrada.

Edit 1: Então, qual deles você usa depende de seus requisitos. Se o usuário precisar inserir uma de suas opções, use o selectelemento Se o uso puder digitar qualquer coisa, use o datalistelemento

Edit 2: Encontrou este boato no HTML Living Standard : "Cada elemento de opção que é um descendente do elemento datalist ... representa uma sugestão."

Do ponto de vista técnico, são completamente diferentes. <datalist>é um contêiner abstrato de opções para outros elementos. No seu caso, você o usou, <input type="text"mas também pode usá-lo com intervalos, cores, datas etc. http://demo.agektmr.com/datalist/

Se você usá-lo com entrada de texto, como um tipo de preenchimento automático, a questão é: É melhor usar uma entrada de texto de formato livre ou uma lista predeterminada de opções? Nesse caso, acho que a resposta é um pouco mais óbvia.

Se focarmos no uso de <datalist>como uma lista de opções para um campo de texto, aqui estão algumas diferenças específicas entre isso e uma caixa de seleção:

• Uma <datalist>caixa de texto alimentada possui uma única sequência para o rótulo de exibição e o envio. Uma caixa de seleção pode ter um valor de envio diferente e um rótulo de exibição <option value='ie'>Internet Explorer</option>.
• Uma <datalist>caixa de texto alimentada não suporta a <optgroup>marca para organizar a exibição.
• Você não pode restringir um usuário à lista de opções da <datalist>mesma forma que pode com a <select>.
• O evento onchange funciona de maneira diferente. Em um <select>elemento, o evento onchange é acionado imediatamente após a alteração, enquanto que com <input type="text"o evento é acionado após o elemento perder o foco ou o usuário pressionar Enter.
• <datalist>tem um suporte realmente irregular nos navegadores. A maneira de mostrar todas as opções disponíveis é inconsistente e as coisas só pioram a partir daí.

O último ponto é realmente o grande na minha opinião. Como você precisará ter um fallback de preenchimento automático mais universal, quase não há razão para enfrentar o problema de configurar a <datalist>. Além disso, qualquer plug-in de preenchimento automático decente permitirá maneiras de estilizar a exibição de suas opções, o que <datalist>não funciona. Se os elementos <datalist>aceitos <li>que você pudesse manipular como quisesse, teria sido realmente ótimo! Mas não.

Também na medida em que posso dizer, a <datalist>pesquisa é uma correspondência exata desde o início da string. Então, se você tivesse <option value="internet explorer">e pesquisou 'explorer', não obteria resultados. A maioria dos plugins de preenchimento automático pesquisará em qualquer lugar do texto.

Usei apenas <datalist>como um auxiliar de conveniência rápido e preguiçoso para algumas páginas internas nas quais sei com 100% de certeza que os usuários têm o Chrome ou Firefox mais recente e não tentam enviar valores falsos. Para qualquer outro caso, é difícil recomendar o uso <datalist>devido ao suporte insuficiente ao navegador.

O datalist inclui preenchimento automático e sugestões nativamente; também pode permitir que um usuário insira um valor que não esteja definido nas sugestões.

Selecionar apenas fornece opções predefinidas que o usuário deve selecionar

Lista de dados é uma nova tag HTML em navegadores compatíveis com HTML5. É renderizado como uma caixa de texto com alguma lista de opções. Por exemplo, na caixa Texto de gênero, você terá opções como Feminino ao digitar 'M' ou 'F' na Caixa de texto.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Para responder especificamente a uma parte da sua pergunta "Existe alguma situação em que seria melhor usar uma ou outra?", Considere um formulário com seções repetidas. Se a seção de repetição contiver muitas selecttags, os options deverão ser renderizados para cada seleção, para cada linha.

Nesse caso, eu consideraria usar datalistwith input, porque o mesmo datalistpode ser usado para qualquer número de inputs. Isso poderia potencialmente economizar uma grande quantidade de tempo de renderização no servidor e seria muito melhor para qualquer número de linhas.

Percebi que não há recurso selecionado no datalist. Ele oferece apenas opções, mas não pode ter uma opção padrão. Você também não pode mostrar a opção selecionada na próxima página.

Há outra diferença importante entre selecte datalist. Aí vem o fator de suporte do navegador.

O select é amplamente suportado pelos navegadores em comparação com o datalist. Consulte esta página para obter suporte completo do navegador do datalist--

Suporte ao navegador de dados

Onde o select é suportado de maneira eficaz em todos os navegadores (desde IE6 +, Firefox 2+, Chrome 1+ etc.)

É semelhante à seleção, mas o datalist possui funcionalidades adicionais, como o auto sugere. Você pode até digitar e ver sugestões enquanto digita.

O usuário também poderá escrever itens que não estão na lista.