In unserem vorherigen Tutorial habe ich HTML5 Datalist anhand eines einfachen Beispiels erklärt. Wenn Sie ein unerfahrener HTML-Programmierer sind, sind Sie möglicherweise verwirrt über den Unterschied zwischen den Elementen
Datenlisten-Tag
Dieses Tag wird verwendet, um die möglichen Werte aus dem großen Array von Werten vorzuschlagen, die für dieses Feld relevant sind. Dieses Element ist ein Textfeld. Normalerweise verfügt dieses Feld über ein größeres Array, in dem der Benutzer die Werte durch Eingabe des Wortteils auswählen kann. Der Benutzer kann auch seinen eigenen Wert eingeben, anstatt ihn aus der Liste auszuwählen. Dieses Element wird im Rahmen der HTML5-Spezifikation neu eingeführt. Anders als im Select-Element kann die Datenliste nur einen Wert haben, sie kann nicht zwei Werte haben, z. B. einen für die Beschriftung und einen anderen für den tatsächlichen Wert dieser Auswahl.
Wählen Sie Tag aus
Dies ist ein altes Tag aus früheren Versionen. Dies hilft dabei, den einzigen gültigen Wert für dieses Feld aufzulisten. Der Benutzer hat keine Berechtigung, seinen eigenen Wert einzugeben. Es legt die gültigen Werte fest und fordert den Benutzer auf, einen beliebigen Wert aus der Liste auszuwählen. Die Auswahlliste kann eine Bezeichnung und einen Wert haben, die unterschiedlich sein können.
Die obigen Definitionen würden die Dinge für Sie sehr klar machen. Wenn ich im folgenden Abschnitt ein einfaches Beispiel mit Screenshots aufschreiben würde, wäre das perfekt, um den Unterschied zwischen Datenlisten- und Auswahlelementen zu verstehen.
Beispiel für eine Datenliste und ein Tag auswählen
<!DOCTYPE html>
<html>
<head>
<title>Datalist and Select Element </title>
</head>
<body>
<h3>DataList Example</h3>
<input list= "countries">
<datalist id= "countries">
<option value= "India"></option>
<option value= "USA"></option>
<option value= "UK"></option>
<option value= "Germany"></option>
<option value= "Australia"></option>
</datalist>
<h3>Select Example</h3>
<select name="countries">
<option value= "India">India</option>
<option value= "USA">USA</option>
<option value= "UK">UK</option>
<option value= "Germany">Germany</option>
<option value= "Australia">Australia</option>
</select>
</body>
</html>
Ausgabe…
