Heim > Artikel > Web-Frontend > So verwenden Sie Datenlisten in HTML
Das <datalist>-Element in HTML wird verwendet, um einen vordefinierten Satz von Optionen bereitzustellen, mit denen Benutzer schnell Werte im Eingabefeld auswählen können. Seine Verwendung umfasst die folgenden Schritte: Erstellen Sie ein <datalist>-Element, das ein oder mehrere <option>-Elemente enthält, wobei jedes <option> Verwenden Sie innerhalb eines <input>-Elements das Listenattribut, um die ID des zugehörigen <datalist>-Elements anzugeben. Wenn der Benutzer Eingaben im <input>-Element macht, wird das <datalist>-Element mit der Eingabe
<datalist>
in der HTML-Verwendung <datalist>
用法
datalist
元素用于提供预定义选项集,以便用户在输入框中方便快捷地选择值。下面详细介绍其用法:
用法:
<datalist>
元素包含一个或多个 <option>
元素,每个 <option>
元素指定一个选项。
HTML 代码:
<code class="html"><input list="browsers" placeholder="选择浏览器"> <datalist id="browsers"> <option value="Firefox"> <option value="Chrome"> <option value="Safari"> <option value="Edge"> </datalist></code>
属性:
<datalist>
元素。<input>
元素与此 <datalist>
关联。list
属性值必须与 <datalist>
元素的 id
属性值相同。选项:
每个 <option>
元素包含一个 value
属性,指定选项的值。用户在 <input>
元素中输入时,<datalist>
元素将显示与输入内容匹配的选项。
使用限制:
<datalist>
元素不能直接使用,必须与 <input>
元素一起使用。<datalist>
元素只能包含 <option>
元素。<input>
元素必须具有 list
属性才能与 <datalist>
datalist wird verwendet, um einen vordefinierten Satz von Optionen bereitzustellen, damit Benutzer schnell und einfach Werte in Eingabefeldern auswählen können. Seine Verwendung wird im Folgenden ausführlich beschrieben: Verwendung:
-
<datalist>
-Element enthält ein oder mehrere <option>
-Elemente, jedes < Das Element ;option>
gibt eine Option an.
HTML-Code: - rrreee
Attribute:
id: 🎜Identifiziert das Element <datalist>
eindeutig. 🎜🎜🎜list: 🎜Gibt an, dass das <input>
-Element mit diesem <datalist>
verknüpft ist. Der Wert des Attributs list
muss mit dem Wert des Attributs id
des Elements <datalist>
identisch sein. 🎜🎜🎜🎜Optionen: 🎜🎜🎜Jedes <option>
-Element enthält ein value
-Attribut, das den Wert der Option angibt. Während der Benutzer das Element <input>
eingibt, zeigt das Element <datalist>
Optionen an, die mit der Eingabe übereinstimmen. 🎜🎜🎜Nutzungsbeschränkungen: 🎜🎜🎜🎜 Das Element <datalist>
kann nicht direkt verwendet werden und muss zusammen mit dem Element <input>
verwendet werden. 🎜🎜<datalist>
-Elemente können nur <option>
-Elemente enthalten. 🎜🎜Das Element <input>
muss das Attribut list
haben, um mit dem Element <datalist>
verknüpft zu werden. 🎜🎜🎜🎜 Vorteile: 🎜🎜🎜🎜🎜 Bequeme Eingabe: 🎜 Reduziert die Zeit, die Benutzer mit der Eingabe von Optionen im Eingabefeld verbringen. 🎜🎜🎜Vorschläge machen: 🎜Machen Sie Benutzern Vorschläge, damit sie schnell die benötigten Optionen finden. 🎜🎜🎜Verbessern Sie die Genauigkeit: 🎜Reduzieren Sie Tippfehler, indem Sie aus einer Reihe vordefinierter Optionen auswählen. 🎜🎜
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Datenlisten in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!