Welche Attribute hat das HTML5--Tag? Spezifische Verwendung des HTML5--Tags (mit Beispielen)

Was sind die Attribute des

HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tags? Erfahren Sie mehr über die spezifische Verwendung des HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tags. Dieser Artikel erklärt hauptsächlich die spezifische Verwendung und Funktion des HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tags sowie eine Einführung in einige Attribute des HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tags

Die Definition und Verwendung des HTML5fc86e7b705049fc9d4fccc89a2e80ee3 ; Tag:

fc86e7b705049fc9d4fccc89a2e80ee3 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.

Bitte verwenden Sie das Listenattribut des Eingabeelements, um die Datenliste zu binden.

HTML5fc86e7b705049fc9d4fccc89a2e80ee3 Tag-Attribute und Beschreibungen:

AlternatingItemStyle ruft die Stileigenschaften der alternierenden Elemente im DataList-Steuerelement ab.

AlternatingItemTemplate ruft die Vorlage des alternierenden Elements in der DataList ab. Attribute ruft alle Attributwerte des Web-Steuerelements ab.

BackColor ruft die Hintergrundfarbe des Webserver-Steuerelements ab .

BorderColor ruft die Rahmenfarbe des Websteuerelements ab oder legt diese fest.

BorderStyle ruft den Rahmenstil des Webserver-Steuerelements ab oder legt diesen fest.

BorderWidth ruft die Rahmenbreite des Webserver-Steuerelements ab oder legt diese fest.

CellPadding ruft den Abstand zwischen dem Inhalt der Zelle und dem Rand der Zelle ab oder legt diesen fest.

CellSpacing ruft den Abstand zwischen den Zellen ab oder legt diesen fest.

Eine Sammlung untergeordneter Steuerelemente im Controls-Listensteuerelement

DataKeyField ruft das Schlüsselfeld in der durch die DataSource-Eigenschaft angegebenen Datenquelle ab oder legt dieses fest.

DataKeys speichert den Schlüsselwert jedes Datensatzes im Datenlistensteuerelement (als Zeile angezeigt).

DataMember ruft das spezifische Datenelement in der Datenquelle mit mehreren Elementen ab, das an das Datenlistensteuerelement gebunden werden soll, oder legt dieses fest.

DataSource Ruft die Quelle ab oder legt sie fest, die die Liste der Werte enthält, die zum Auffüllen der Elemente im Steuerelement verwendet werden.

EditItemIndex ruft die Indexnummer des ausgewählten Elements ab, das im DataList-Steuerelement bearbeitet werden soll, oder legt diese fest.

EditItemStyle Ruft die Stileigenschaften des Elements ab, das zur Bearbeitung in einem DataList-Steuerelement ausgewählt wurde.

EditItemTemplate Ruft die Vorlage für das zur Bearbeitung im DataList-Steuerelement ausgewählte Element ab oder legt diese fest.

Enable ruft einen Wert ab oder legt diesen fest, der angibt, ob die Webserversteuerung aktiviert ist.

HeaderTemplate ruft die Vorlage für den Header-Teil des DataList-Steuerelements ab oder legt diese fest.

Höhe wird abgerufen oder festgelegt

HTML fc86e7b705049fc9d4fccc89a2e80ee3-Tag-Beispiel:

Das Folgende ist ein Eingabeelement, dessen mögliche Werte beschrieben werden in datalist :

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

Ich habe zwei spezifische Verwendungsmöglichkeiten des HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tags entdeckt und möchte sie mit Ihnen teilen:

Ich benötige eine E-Mail-Vervollständigung, wenn Ich bin kürzlich auf Datalist gestoßen und fand es sehr nützlich. Datalist muss in Verbindung mit dem Eingabe-Tag verwendet werden und kann für Eingabeempfehlungen, E-Mail-Vervollständigung usw. verwendet werden. Nachfolgend wird die entsprechende Nutzung kurz protokolliert.

1.HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tag wird für Eingabeempfehlungen verwendet:

<p>请输入您最喜欢的科目：</p>
<input type="text" list="mylist1">
<datalist id="mylist1">
<option value="电路原理">
<option value="数字电路">
<option value="模拟电路">
<option value="计算机原理">
</datalist>
</br>

Die ID der Datenliste muss bei der Ausgabe mit dem Listenattribut der Eingabe übereinstimmen Wenn Sie bereit sind, werden unter den Eingabeoptionen automatisch Optionen angezeigt, und die Datenliste verfügt über die Funktion einer Fuzzy-Abfrage. Wenn Sie beispielsweise „Straße“ in das Textfeld eingeben, werden als Inhalt Schaltungsprinzipien, digitale Schaltungen und analoge Schaltungen empfohlen Schaltkreise.

2. HTML5fc86e7b705049fc9d4fccc89a2e80ee3-Tag wird zur E-Mail-Vervollständigung verwendet:

HTML-Code:

<p>请输入您的邮箱：</p>
<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
<datalist id="mylist2"></datalist>

js-Code:

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value=&#39;"+ email +"@qq.com&#39;>"+
"<option value=&#39;"+ email +"@126.com&#39;>"+
"<option value=&#39;"+ email +"@foxmail.com&#39;>"+
"<option value=&#39;"+ email +"@163.com&#39;>"+
"<option value=&#39;"+ email +"@gmail.com&#39;>")
}
}

Das oninput-Attribut des Eingabe-Tags kann Änderungen im Eingabeinhalt erkennen. Wenn sich der Inhalt des Eingabefelds ändert, wird js gestartet, um die Option in die Datenliste anzuhängen. Wenn der Benutzer @ manuell eingibt, ist keine Eingabeaufforderung erforderlich.

Unterschiede zwischen HTML 4.01 und HTML 5: Das

fc86e7b705049fc9d4fccc89a2e80ee3-Tag ist ein neues Tag in HTML 5.

Browserunterstützung:

Alle gängigen Browser unterstützen das fc86e7b705049fc9d4fccc89a2e80ee3-Tag, außer Internet Explorer und Safari.

[Verwandte Empfehlungen]

Was sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen)

Was ist der Artikel-Tag in HTML5? Wo wird das Artikelelement in HTML5 verwendet?

Das obige ist der detaillierte Inhalt vonWelche Attribute hat das HTML5-