Modulo HTML: Select-Option vs Datalist-Option


136

Mi chiedevo quali sono le differenze tra Select-Option e Datalist-Option. C'è qualche situazione in cui sarebbe meglio usare l'uno o l'altro? Di seguito è riportato un esempio di ciascuno:

Selezionare l'opzione

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

11
Perché HTML5 afferma specificamente che gli attributi non quotati
james.garriss

1
Qualcuno sa perché non chiudiamo il optiontag nell'opzione datalist? Sublime sembra voler
Johnny Metz il

1
@ johnny Metz Puoi chiudere il tag ma può essere autochiudente puoi anche fare qualcosa del genere: code <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> <option value = " safari "> Safari </option> </datalist> codeIl risultato è strano. I datalist stampano il valore nell'elenco. Tale valore diventa quindi il valore del campo di input.
Sarah M Giles,

3
@JohnnyMetz, HTML 5 è stato, in parte, una reazione contro XHTML. Per alcuni elementi, ad esempio option, non è necessario disporre di un tag di chiusura o auto-chiusura. HTML 5! = XHTML.
james.garriss,

2
La specifica dice "I tag di inizio e fine di alcuni elementi normali possono essere omessi". Dice anche: "Il tag di fine di un elemento opzione può essere omesso se l'elemento opzione è immediatamente seguito da un altro elemento opzione, o se è immediatamente seguito da un elemento optgroup, o se non vi è più contenuto nell'elemento padre". w3.org/TR/html/syntax.html#optional-tags
james.garriss

Risposte:


180

Pensalo come la differenza tra un requisito e un suggerimento. Per l' selectelemento, l'utente è tenuto a selezionare una delle opzioni fornite. Per l' datalistelemento, si suggerisce all'utente di selezionare una delle opzioni fornite, ma in realtà può inserire tutto ciò che desidera nell'input.

Modifica 1: Quindi quello che usi dipende dalle tue esigenze. Se l'utente deve inserire una delle tue scelte, utilizza l' selectelemento. Se l'uso può inserire qualunque cosa, usa l' datalistelemento.

Modifica 2: trovato questo bocconcino nel HTML Living Standard : "Ogni elemento di opzione che discende dall'elemento datalist ... rappresenta un suggerimento."


Inoltre, ha principalmente [supporto parziale] (( caniuse.com/#feat=datalist ) negli altri browser, con bug come lunghi datalist che non possono essere esaminati, ecc.
Govind Rai,

In Chrome al momento, se vengono immessi (digitati) i dati, si impedisce al clic della freccia. Questo probabilmente non è l'ideale nella maggior parte dei casi.
David,

66

Da un punto di vista tecnico sono completamente diversi. <datalist>è un contenitore astratto di opzioni per altri elementi. Nel tuo caso l'hai usato con <input type="text"ma puoi anche usarlo con intervalli, colori, date ecc. Http://demo.agektmr.com/datalist/

Se lo si utilizza con l'immissione di testo, come tipo di completamento automatico, la domanda è davvero: è meglio utilizzare un input di testo in formato libero o un elenco predeterminato di opzioni? In tal caso, penso che la risposta sia un po 'più ovvia.

Se ci concentriamo sull'uso di <datalist>come un elenco di opzioni per un campo di testo, ecco alcune differenze specifiche tra quella e una casella di selezione:

  • Una <datalist>casella di testo alimentata ha una singola stringa sia per l'etichetta di visualizzazione che per l'invio. Una casella di selezione può avere un valore di invio diverso rispetto all'etichetta di visualizzazione <option value='ie'>Internet Explorer</option>.
  • Una <datalist>casella di testo alimentata non supporta il <optgroup>tag per organizzare la visualizzazione.
  • Non puoi limitare un utente all'elenco di opzioni <datalist>come puoi con a <select>.
  • L' evento onchange funziona in modo diverso. Su un <select>elemento, l'evento onchange viene generato immediatamente al momento della modifica, mentre con <input type="text"l'evento viene generato dopo che l'elemento perde la messa a fuoco o l'utente preme invio.
  • <datalist>ha un supporto davvero discutibile su tutti i browser. Il modo di mostrare tutte le opzioni disponibili è incoerente e le cose peggiorano solo da lì.

L'ultimo punto è davvero il più grande secondo me. Dato che DEVI avere un fallback del completamento automatico più universale, non c'è quasi motivo di affrontare il problema di configurare a <datalist>. Inoltre, qualsiasi plug-in di completamento automatico decente consentirà di modellare il display delle opzioni, il che <datalist>non funziona. Se <datalist>accettassi <li>elementi che potresti manipolare come vuoi, sarebbe stato davvero grandioso! Ma no.

Inoltre, per quanto posso dire, la <datalist>ricerca è una corrispondenza esatta dall'inizio della stringa. Quindi, se lo avessi fatto <option value="internet explorer">e avessi cercato "explorer", non otterrai risultati. La maggior parte dei plug-in di completamento automatico cercherà ovunque nel testo.

Ho usato solo <datalist>un aiuto rapido e pigro per alcune pagine interne in cui so con certezza al 100% che gli utenti hanno l'ultimo Chrome o Firefox e non proveranno a inviare valori fasulli. Per ogni altro caso, è difficile consigliarne l'uso a <datalist>causa del supporto del browser molto scarso.


3
Ottima risposta !! Potresti spiegare per favore il tuo secondo proiettile? Cosa intendi con "gruppi di opzioni per organizzare la visualizzazione"? Grazie.
Govind Rai,

afaik (nel 2019, su Chrome e Firefox), <datalist> corrisponde agli infissi (non solo ai prefissi). quindi "digitare" re "suggerisce sia" Firefox "che" Internet Explorer ".
Sam Boosalis,

@GovindRai I La ricerca rapida di "elemento optgroup" restituisce questa pagina dal sempre utile MDN con ulteriori informazioni (ed esempi): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH

Ho provato con Firefox 66 e Chrome 73 - in realtà, le etichette dei datalist corrispondono ovunque, quindi ad esempio se il tuo datalist contiene nomi di paesi, "ted" corrisponderà a "Stati Uniti" e "Regno Unito".
Błotosmętek,

5

Datalist include il completamento automatico e i suggerimenti in modo nativo, inoltre può consentire a un utente di immettere un valore che non è definito nei suggerimenti.

Seleziona fornisce solo opzioni predefinite tra cui l'utente deve selezionare


2

Elenco dati è un nuovo tag HTML nei browser supportati da HTML5. Viene visualizzato come una casella di testo con un elenco di opzioni. Ad esempio per la casella di testo Sesso ti darà le opzioni come Maschio Femmina quando digiti 'M' o 'F' nella casella di testo.

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

5
È vero, ma fornisce un'informazione nuova e piacevole, vale a dire che digitando la prima lettera si selezionano gli elementi corrispondenti nell'elenco.
james.garriss,

1

Per rispondere in modo specifico a una parte della tua domanda "Esiste una situazione in cui sarebbe meglio usare l'uno o l'altro?", Considera un modulo con sezioni ripetute. Se la sezione ripetuta contiene molti selecttag, optionè necessario eseguire il rendering di s per ciascuna selezione, per ogni riga.

In tal caso, prenderei in considerazione l'utilizzo datalistcon input, poiché lo stesso datalistpuò essere utilizzato per qualsiasi numero di inputs. Ciò potrebbe potenzialmente risparmiare una grande quantità di tempo di rendering sul server e scalare molto meglio su qualsiasi numero di righe.


Se non ti preoccupi di dare all'utente le opzioni tra cui scegliere, perché preoccuparsi di usare un datalist? Usa invece un campo di testo.
james.garriss,

0

Ho notato che non esiste alcuna funzione selezionata nel datalist. Ti dà solo la scelta ma non può avere un'opzione predefinita. Non puoi neanche mostrare l'opzione selezionata nella pagina successiva.


L'equivalente per un input più datalist sarebbe impostare il valore = "(opzione predefinita)" sull'input stesso. Per un input con type = "text", questo testo verrà visualizzato per impostazione predefinita ma sarà modificabile.
Bemisawa,

0

C'è un'altra differenza importante tra selecte datalist. Ecco che arriva il fattore di supporto del browser.

select è ampiamente supportato dai browser rispetto al datalist. Dai un'occhiata a questa pagina per il supporto completo del datalist da parte del browser--

Supporto browser datalist

Dove as select è supportato efficacemente in tutti i browser (da IE6 +, Firefox 2+, Chrome 1+ ecc.)


0

È simile a selezionare, ma il datalist ha funzionalità aggiuntive come il suggerimento automatico. Puoi persino digitare e visualizzare suggerimenti come e quando digiti.

L'utente sarà anche in grado di scrivere elementi che non sono presenti nell'elenco.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.