Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.

Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.
Auf einer Seite gibt es viele Steuerelemente (Elemente oder Tags). Um die Bedienung dieser Tags zu vereinfachen, müssen diese mit einem Ausweis gekennzeichnet werden.

Die erforderlichen Attribute sind: Name, ID, Klasse

1. Name

Geben Sie einen Namen für das Tag an.

1.1 Format: <input type="text" name="benutzername" />

1.2 Anwendungsszenarien

①Formular: Name kann als Variablenname der an den Server übertragenen Formularliste verwendet werden. Der oben an den Server übertragene Name lautet beispielsweise: Benutzername = „Textwert“.

②Eingabetyp = „Radio“-Radiotag: Wenn der Name mehrerer Radiotags auf denselben Wert eingestellt ist, wird ein Radioauswahlvorgang ausgeführt.

Code kopieren
Der Code lautet wie folgt:

<input type="radio" name='sex'/>Männlich
<input type="radio" name='sex'/>Weiblich③Schnell eine Gruppe von Tags mit demselben Namen abrufen: Tags mit demselben Namen abrufen und gemeinsam Vorgänge ausführen, z. B.: Attribute ändern, Ereignisse registrieren usw.;
[Code]
Funktion changtxtcolor() {
var txts = document.getElementsByName('txtcolor'); //Alle Tags mit Name=txtcolor abrufen
for (var i = 0; i < txts.length; i++) { //Durchlaufe die Tags und ändere die Hintergrundfarbe auf Rot
txts[i].style.backgroundColor = "rot";
}
}

1.3 Funktionen

Der Wert des Namensattributs ist auf der aktuellen Seite nicht eindeutig.

2. Ich würde

Gibt die eindeutige Kennung eines Tags an.

2.1 Format: <Eingabetyp=Passwort-ID="Benutzerkennwort" />

2.2 Anwendungsszenarien:

① Erhalten Sie das Tag-Objekt schnell anhand der bereitgestellten eindeutigen ID-Nummer. Beispiel: document.getElementById(id)

② Wird als Wert des For-Attributs des Label-Tags verwendet: Beispiel: <label for='userid'>Benutzername: </label>, was bedeutet, dass beim Klicken auf dieses Label-Tag das Label mit der ID „userid“ den Fokus erhält.

2.3 Funktionen

Der Wert des ID-Attributs muss auf der aktuellen Seite eindeutig sein.

3. Klasse

Gibt den Klassennamen des Tags an.

3.1 Format: <input type=button class="btnsubmit" />

3.2 Anwendungsszenarien:

①CSS-Operation: Fügen Sie einige bestimmte Stile in eine Klasse ein und fügen Sie diese Klasse hinzu, wenn Sie Tags dieses Stils benötigen.

3.3 Funktionen:

Sie können mehrere Klassen in ein Klassenattribut einfügen, diese müssen jedoch durch Leerzeichen getrennt sein. Beispiel: class='btnsubmit btnopen'

<<:  Detaillierte Schritte zum Erweitern der LVM-Festplatte unter Linux

>>:  Der Unterschied zwischen Anzeige, Sichtbarkeit, Deckkraft, RGBA und Z-Index: -1 in CSS

Artikel empfehlen

Wie werden Leerzeichen in HTML dargestellt (was bedeuten sie)?

Bei der Webentwicklung stößt man häufig auf Zeiche...

Überlegungen zur Partitionierung von MySQL-Datenbanktabellen [empfohlen]

Die Tabellenpartitionierung unterscheidet sich vo...

So installieren Sie MySQL 5.7 unter Windows

Laden Sie zuerst die komprimierte Version von MyS...

Detaillierte Analyse des Diff-Algorithmus in React

Verständnis des Diff-Algorithmus in React diff -A...

Detaillierte Einführung in das MySQL-Installationstutorial unter Windows

Inhaltsverzeichnis 1. Einige Konzepte, die Sie vo...

Mehrere Möglichkeiten zum Berechnen des Alters anhand des Geburtstags in MySQL

Ich habe MySQL vorher nicht sehr oft verwendet un...

Vue-Ereignisparameter $event = Ereigniswertfall

Vorlage <el-table :data="Datenliste"...

So verhindern Sie, dass Website-Inhalte in Suchmaschinen aufgenommen werden

Normalerweise besteht das Ziel beim Erstellen ein...

Zusammenfassung gängiger Befehle zur Linux-Benutzer- und Gruppenverwaltung

Dieser Artikel fasst die allgemeinen Befehle zur ...

VUE implementiert einen Beispielcode für das Spiel Flappy Bird

Flappy Bird ist ein sehr einfaches kleines Spiel,...