Wozu dient das HTML5-Datalist-Tag? Hier finden Sie Anwendungsbeispiele für das Datalist-Tag-H5-Tutorial-php.cn

Wozu dient das HTML5-Datalist-Tag? Hier finden Sie Anwendungsbeispiele für das Datalist-Tag

寻∝梦

Freigeben： 2018-09-03 17:33:54

Original

5697 Leute haben es durchsucht

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:

Tag definiert eine Liste von Optionen. Bitte verwenden Sie dieses Element in Verbindung mit dem Eingabeelement, um die möglichen Werte der Eingabe zu definieren.

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>

Nach dem Login kopieren

Dies wird im Browser wie folgt angezeigt:

Wozu dient das HTML5-Datalist-Tag? Hier finden Sie Anwendungsbeispiele für das Datalist-Tag

Dies hat keinen Aktionseffekt. Schauen wir uns nun den Effekt an, wenn wir die Maus nach oben bewegen und klicken:

Wozu dient das HTML5-Datalist-Tag? Hier finden Sie Anwendungsbeispiele für das Datalist-Tag

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>

Nach dem Login kopieren

The Der Effekt ist wie im Bild dargestellt:

Wozu dient das HTML5-Datalist-Tag? Hier finden Sie Anwendungsbeispiele für das Datalist-Tag

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

Wie zentriert man die chinesischen Zeichen im col-Tag in HTML? Grundlegende Verwendung des HTML-Col-Tags (mit Beispielen)

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!