Heim > Web-Frontend > H5-Tutorial > Hauptteil

So verwenden Sie das Datalist-Element-Tag in HTML5

藏色散人
Freigeben: 2018-12-05 09:43:37
Original
5632 Leute haben es durchsucht



ist ein neues Tag in HTML 5, dieses Element wird in Formularen zum Abrufen von Daten verwendet Benutzer, die Daten empfangen, können Optionen anzeigen, die der Benutzer auswählen kann.

So verwenden Sie das Datalist-Element-Tag in HTML5

Empfohlene Studie: „HTML5-Tutorial

Nachfolgend stellen wir es Ihnen anhand konkreter Codebeispiele vor.

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Datalist元素使用示例</title>
</head>
<body>
<input name="section" list="scripts" />
<datalist id="scripts">
    <option value="PHP" />
    <option value="JavaScript" />
    <option value="java" />
    <option value="Go" />
    <option value="python" />
    <option value="c++" />
</datalist>
</body>
</html>
Nach dem Login kopieren

Der Effekt ist wie folgt:

So verwenden Sie das Datalist-Element-Tag in HTML5

Es verfügt über eine Funktion zur automatischen Vervollständigung, die Benutzern bei der Eingabe von Inhalten in das Textfeld mit Dropdown-Liste hilft Boxen oder Optionsfelder Andersherum kann der Benutzer einen beliebigen Text schreiben, ohne durch die Optionen von datalist eingeschränkt zu sein. Die Datenliste wird über das Eingabeelementlistenattribut gebunden (oder verknüpft).

Hinweis:

Tag-Definitionsoptionsliste. Verwenden Sie dieses Element in Verbindung mit einem 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. Sie müssen das Listenattribut des Eingabeelements verwenden, um die Datenliste zu binden.

Dieser Artikel ist eine Einführung in die Verwendung des Datalist-Elements in HTML5. Er ist einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde in Not hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Datalist-Element-Tag in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage