HTML-Formular: Select-Option vs Datalist-Option

136

Ich habe mich gefragt, was die Unterschiede zwischen Select-Option und Datalist-Option sind. Gibt es eine Situation, in der es besser wäre, das eine oder andere zu verwenden? Es folgt jeweils ein Beispiel:

Wähle eine 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
quelle
11
Weil der HTML5 ausdrücklich sagt, dass nicht zitierte
james.garriss
1
optionWeiß jemand, warum wir das Tag in der Datenlisten-Option nicht schließen ? Erhaben scheint zu wollen
Johnny Metz
1
@ johnny Metz Sie können das Tag schließen, aber es kann sich selbst schließen. Sie können auch code Folgendes tun: <input list = "browser" name = "browser"> <datalist id = "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> </ datalist> codeDas Ergebnis ist seltsam. Datalisten drucken den Wert in der Liste. Dieser Wert wird dann zum Wert des Eingabefeldes.
Sarah M Giles
3
@ JohnnyMetz, HTML 5 war teilweise eine Reaktion gegen XHTML. Für bestimmte Elemente, wie z. B. option, ist es nicht erforderlich, ein schließendes Tag zu haben oder sich selbst zu schließen. HTML 5! = XHTML.
James.garriss
2
In der Spezifikation heißt es: "Die Start- und End-Tags bestimmter normaler Elemente können weggelassen werden." Außerdem heißt es: "Das End-Tag eines Optionselements kann weggelassen werden, wenn dem Optionselement unmittelbar ein anderes Optionselement folgt oder wenn unmittelbar ein Optgroup-Element folgt oder wenn das übergeordnete Element keinen weiteren Inhalt enthält." w3.org/TR/html/syntax.html#optional-tags
james.garriss

Antworten:

180

Betrachten Sie es als den Unterschied zwischen einer Anforderung und einem Vorschlag. Für das selectElement muss der Benutzer eine der von Ihnen angegebenen Optionen auswählen. Für das datalistElement wird empfohlen, dass der Benutzer eine der von Ihnen angegebenen Optionen auswählt, aber tatsächlich alles eingeben kann, was er in die Eingabe möchte.

Bearbeiten 1: Welche Sie also verwenden, hängt von Ihren Anforderungen ab. Wenn der Benutzer eine Ihrer Auswahlmöglichkeiten eingeben muss , verwenden Sie das selectElement. Wenn die Verwendung etwas eingeben kann, verwenden Sie das datalistElement.

Bearbeiten 2: Diesen Leckerbissen im HTML Living Standard gefunden : "Jedes Optionselement, das ein Nachkomme des Datenlistenelements ist ... repräsentiert einen Vorschlag."

james.garriss
quelle
Außerdem hat es meistens [teilweise Unterstützung] (( caniuse.com/#feat=datalist ) in den anderen Browsern, wobei Fehler wie lange Datenlisten nicht mehr scrollbar sind usw.
Govind Rai
Wenn in Chrome derzeit Daten eingegeben (eingegeben) werden, wird verhindert, dass auf den Pfeil geklickt wird. Dies ist wahrscheinlich in den meisten Fällen nicht ideal.
David
66

Aus technischer Sicht sind sie völlig anders. <datalist>ist ein abstrakter Container mit Optionen für andere Elemente. In Ihrem Fall haben Sie es mit verwendet, <input type="text"aber Sie können es auch mit Bereichen, Farben, Datumsangaben usw. verwenden. Http://demo.agektmr.com/datalist/

Wenn Sie es mit Texteingabe als eine Art Autovervollständigung verwenden, lautet die Frage wirklich: Ist es besser, eine Freiform-Texteingabe oder eine vorgegebene Liste von Optionen zu verwenden? In diesem Fall denke ich, dass die Antwort etwas offensichtlicher ist.

Wenn wir uns auf die Verwendung von konzentrieren <datalist> als Liste von Optionen für ein Textfeld konzentrieren, gibt es hier einige spezifische Unterschiede zwischen diesem und einem Auswahlfeld:

  • Ein <datalist>eingegebenes Textfeld enthält eine einzelne Zeichenfolge sowohl für die Anzeige als auch für die Übermittlung. Ein Auswahlfeld kann einen anderen Übermittlungswert als die Anzeigebezeichnung haben<option value='ie'>Internet Explorer</option> .
  • Ein <datalist>gespeistes Textfeld unterstützt das nicht<optgroup> Tag zum Organisieren der Anzeige nicht.
  • Sie können einen Benutzer nicht auf die Liste der Optionen beschränken, <datalist>wie Sie es mit einem können<select> .
  • Das Ereignis onchange funktioniert anders. Bei einem <select>Element wird das Ereignis onchange sofort nach der Änderung ausgelöst, während <input type="text"das Ereignis ausgelöst wird, nachdem das Element den Fokus verloren hat oder der Benutzer die Eingabetaste drückt.
  • <datalist>hat wirklich fleckige Unterstützung für alle Browser. Die Art und Weise, alle verfügbaren Optionen anzuzeigen, ist inkonsistent, und von da an wird es nur noch schlimmer.

Der letzte Punkt ist meiner Meinung nach wirklich der große. Da Sie einen universelleren Fallback für die automatische Vervollständigung benötigen, gibt es fast keinen Grund, sich die Mühe zu machen, a zu konfigurieren <datalist>. Außerdem können Sie mit der anständigen automatischen Vervollständigung die Anzeige Ihrer Optionen gestalten, was <datalist>jedoch nicht der Fall ist. Wenn <datalist>akzeptierte <li>Elemente, die Sie manipulieren könnten, wie Sie wollen, wäre es wirklich toll gewesen! Aber nein.

Auch soweit ich das beurteilen kann, ist die <datalist>Suche eine exakte Übereinstimmung vom Anfang der Zeichenfolge. Wenn Sie also <option value="internet explorer">nach "Explorer" gesucht hätten, würden Sie keine Ergebnisse erhalten. Die meisten Plugins für die automatische Vervollständigung suchen an einer beliebigen Stelle im Text.

Ich habe nur <datalist>für einige interne Seiten, bei denen ich mit 100% iger Sicherheit weiß, dass die Benutzer über das neueste Chrome oder Firefox verfügen , als schnellen und faulen Hilfsprogramm verwendet und werde nicht versuchen, falsche Werte einzureichen. In allen anderen Fällen ist die Verwendung <datalist>aufgrund der sehr schlechten Browserunterstützung schwer zu empfehlen .

mastaBlasta
quelle
3
Hervorragende Antwort !! Könnten Sie bitte Ihre zweite Kugel erklären? Was meinen Sie mit "Optionsgruppen zum Organisieren der Anzeige"? Vielen Dank.
Govind Rai
afaik (2019 in Chrome und Firefox) stimmt <Datalist> mit Infixen überein (nicht nur mit Präfixen). "tippen" re "schlägt also sowohl" Firefox "als auch" Internet Explorer "vor.
sam boosalis
@GovindRai Die flüchtige Suche nach "optgroup element" gibt diese Seite aus dem immer nützlichen MDN mit weiteren Informationen (und Beispielen) zurück: developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH
Ich habe unter Firefox 66 und Chrome 73 getestet. Tatsächlich stimmen die Datenlisten-Bezeichnungen überall überein. Wenn Ihre Datenliste beispielsweise Ländernamen enthält, stimmt "ted" mit "USA" und "Großbritannien" überein.
Błotosmętek
5

Die Datenliste enthält die automatische Vervollständigung und Vorschläge nativ. Sie kann einem Benutzer auch die Eingabe eines Werts ermöglichen, der in den Vorschlägen nicht definiert ist.

Mit Auswählen erhalten Sie nur vordefinierte Optionen, aus denen der Benutzer auswählen muss

user3167654
quelle
2

Data List ist ein neues HTML-Tag in HTML5-unterstützten Browsern. Es wird als Textfeld mit einer Liste von Optionen gerendert. Als Beispiel für das Textfeld "Geschlecht" erhalten Sie Optionen als "Männlich" und "Weiblich", wenn Sie "M" oder "F" in das Textfeld eingeben.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>
Deepak
quelle
5
Stimmt, aber es gibt eine nette, neue Information, nämlich dass durch Eingabe des ersten Buchstabens entsprechende Elemente in der Liste ausgewählt werden.
James.garriss
1

Um einen Teil Ihrer Frage "Gibt es eine Situation, in der es besser ist, den einen oder anderen zu verwenden?" Speziell zu beantworten, ziehen Sie ein Formular mit sich wiederholenden Abschnitten in Betracht. Wenn der sich wiederholende Abschnitt viele selectTags enthält , wird deroption muss s für jede Auswahl für jede Zeile gerendert werden.

In einem solchen Fall würde ich die Verwendung datalistmit in Betracht ziehen input, da das gleiche datalistfür eine beliebige Anzahl von inputs verwendet werden kann. Dies könnte möglicherweise viel Renderzeit auf dem Server sparen und auf eine beliebige Anzahl von Zeilen viel besser skalieren.

Bruce Pierson
quelle
Wenn Sie sich nicht die Mühe machen, den Benutzeroptionen zur Auswahl zu geben, warum sollten Sie sich dann die Mühe machen, einen Datalisten zu verwenden? Verwenden Sie stattdessen einfach ein Textfeld.
James.garriss
0

Mir ist aufgefallen, dass in der Datenliste keine ausgewählte Funktion vorhanden ist. Es gibt Ihnen nur die Wahl, kann aber keine Standardoption haben. Sie können die ausgewählte Option auch nicht auf der nächsten Seite anzeigen.

Weihui Guo
quelle
Das Äquivalent für eine Eingabe plus Datenliste wäre das Setzen des Werts = "(Standardoption)" für die Eingabe selbst. Bei einer Eingabe mit type = "text" wird dieser Text standardmäßig angezeigt, kann jedoch bearbeitet werden.
Bemisawa
0

Es gibt einen weiteren wichtigen Unterschied zwischen selectund datalist. Hier kommt der Browser-Unterstützungsfaktor.

select wird von Browsern im Vergleich zu datalist weitgehend unterstützt. Auf dieser Seite finden Sie die vollständige Browserunterstützung von datalist--.

Unterstützung für Datenlisten-Browser

Wobei as select in effektiv allen Browsern unterstützt wird (seit IE6 +, Firefox 2+, Chrome 1+ usw.)

Neophyt
quelle
0

Es ist ähnlich zu wählen, aber Datalist hat zusätzliche Funktionen wie Auto vorschlagen. Sie können sogar Vorschläge eingeben und anzeigen, wenn Sie tippen.

Der Benutzer kann auch Elemente schreiben, die nicht in der Liste enthalten sind.

Viyaan Jhiingade
quelle