Dieser Artikel informiert Sie hauptsächlich über die Verwendung des HTML5-Datalist-Tags und Anwendungsbeispiele des HTML5-Datalist-Tags. In diesem Artikel geht es um zwei Beispiele für häufig verwendete Optionsfelder, aus denen jeder auswählen kann.
Schauen wir uns zunächst die Verwendung des HTML5-Datalist-Tags an:
Die Datenliste und ihre Optionen werden nicht angezeigt, es handelt sich lediglich um eine Liste zulässiger Eingabewerte.
Bitte verwenden Sie das Listenattribut des Eingabeelements, um die Datenliste zu binden.
Verfügbarkeit: Datenliste: auswählbare Eingabeliste (bequemer als nur die Dropdown-Liste auswählen)
Schauen wir uns nun ein Beispiel für ein HTML5-Datenlisten-Tag an:
Das Folgende ist ein Eingabeelement mit möglichen Werten, die in der Datenliste beschrieben sind:
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="PHP中文网"> <option value="html"> <option value="寻梦"> </datalist>
Dies wird im Browser wie folgt angezeigt:
Dies hat keinen Aktionseffekt. Schauen wir uns nun den Effekt an, wenn wir die Maus nach oben bewegen und klicken:
Sehen Sie, der Effekt ist herauskommen. Dies ist die grundlegende Verwendung des HTML5-Datalist-Tags.
Der Listenattributwert des Eingabeeingabefelds ist die ID der Datenliste, sodass die Datenliste dem Eingabeeingabefeld zugeordnet werden kann. Die Datenliste selbst wird nicht angezeigt, sie wird nur automatisch angezeigt, wenn sie mit der Eingabe abgeglichen werden muss.
Ein weiteres Verwendungsbeispiel für HTML5-Datalist-Tags:
Im Webdesign werden häufig automatische Dropdown-Eingabeaufforderungen wie Eingabefelder verwendet, die den Benutzern die Eingabe erheblich erleichtern . Wenn Sie in der Vergangenheit eine solche Funktion implementieren möchten, müssen Sie von Entwicklern verlangen, dass sie einige Javascript-Kenntnisse oder verwandte Frameworks verwenden, um Ajax-Aufrufe durchzuführen, was einen gewissen Programmieraufwand erfordert. Aber mit der allmählichen Beliebtheit von HTML5 können Entwickler das neue Datalist-Tag verwenden, um schnell sehr schöne Autovervollständigungskomponenteneffekte zu entwickeln
Codebeispiel für das HTML5-Datalist-Tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf-8">
</head>
<p>
浏览器版本：<input list="words">
</p>
<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>
</body>
</html>The Der Effekt ist wie im Bild dargestellt:
Ist dieses Optionsfeld nicht sehr gut?
Okay, das ist die Einführung zum HTML5-Datalist-Tag. Wenn Sie Fragen haben, können Sie diese unten stellen.
[Empfehlung des Herausgebers]
Wie schreibe ich HTML-Leerzeichencode? Zusammenfassung des Ausdrucks des HTML-Leerzeichencodes
Das obige ist der detaillierte Inhalt vonWozu dient das HTML5-Datalist-Tag? Hier finden Sie Anwendungsbeispiele für das Datalist-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
