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

136

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>
user928984
fonte
11
Porque o HTML5 diz especificamente que atributos não cotados são válidos: w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted
james.garriss
1
Alguém sabe por que não fechamos a optiontag na opção datalist? Sublime parece querer
Johnny Metz
1
@ johnny Metz Você pode fechar a tag, mas ela pode se fechar code automaticamente. Você também pode fazer algo assim: <input list = "browsers" name = "browser"> <datalist id = "browsers"> <option value = "firefox" > Firefox </option> <option value = "ie"> IE </option> <option value = "chrome"> Chrome </option> <option value = "opera"> Opera </option> <opção value = " safari "> Safari </option> </datalist> codeO resultado é estranho. Os datalistas imprimem o valor na lista. Esse valor se torna o valor do campo de entrada.
Sarah M Giles
3
@JohnnyMetz, o HTML 5 foi, em parte, uma reação contra o XHTML. Para certos elementos, como option, não há necessidade de ter uma marca de fechamento ou de se fechar automaticamente. HTML 5! = XHTML.
James.garriss # 5/18
2
A especificação diz: "As tags de início e fim de certos elementos normais podem ser omitidas". Ele também diz: "A tag final de um elemento de opção pode ser omitida se o elemento de opção for seguido imediatamente por outro elemento de opção, ou se for seguido imediatamente por um elemento de grupo de opções ou se não houver mais conteúdo no elemento pai". w3.org/TR/html/syntax.html#optional-tags
james.garriss

Respostas:

180

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."

james.garriss
fonte
Além disso, tem na maior parte [apoio parcial] (( caniuse.com/#feat=datalist ) nos outros navegadores, com erros, tais como longos DataLists tornando unscrollable, etc
Govind Rai
No chrome, no momento, se os dados forem inseridos (digitados), proibirá que a seta seja clicada. Provavelmente isso não é ideal na maioria dos casos.
David
66

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.

mastaBlasta
fonte
3
Excelente resposta !! Poderia explicar sua segunda bala? O que você quer dizer com "grupos de opções para organizar a exibição"? Obrigado.
Govind Rai
afaik (em 2019, no Chrome e Firefox), <datalist> corresponde a infixes (não apenas prefixos). tão "digitação "re" sugere tanto "Firefox" e "Internet Explorer".
sam boosalis
@GovindRai A pesquisa superficial do "elemento optgroup" retorna esta página do sempre útil MDN com mais informações (e exemplos): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH
Eu testei no Firefox 66 e Chrome 73 - na verdade, os rótulos de datalist correspondem a qualquer lugar; por exemplo, se seu datalist contiver nomes de países, "ted" corresponderá a "United States" e "United Kingdom".
Błotosmętek 10/05/19
5

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

user3167654
fonte
2

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>
Deepak
fonte
5
É verdade, mas fornece uma nova e agradável informação: a digitação da primeira letra selecionará os itens correspondentes na lista.
James.garriss
1

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.

Bruce Pierson
fonte
Se você não se incomodará em oferecer ao usuário opções para escolher, por que se preocupar em usar um datalist? Basta usar um campo de texto.
James.garriss
0

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.

Weihui Guo
fonte
O equivalente para uma entrada mais um datalist seria definir o valor = "(opção padrão)" na própria entrada. Para uma entrada com type = "text", esse texto aparecerá por padrão, mas será editável.
Bemisawa 18/07
0

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.)

neófito
fonte
0

É 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.

Viyaan Jhiingade
fonte