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

Einführung in den HTML-Standard für chinesische Zeichenkodierung

In HTML müssen Sie die von der Webseite verwendet...

Docker+Selenium-Methode zur Realisierung automatischer Gesundheitsberichte

In diesem Artikel wird das Gesundheitsmeldesystem...

VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren

Willkommen zur vorherigen Canvas-Spielserie: 《VUE...

MySQL 5.7.18 Installations-Tutorial unter Windows

In diesem Artikel wird erklärt, wie Sie MySQL aus...

So verwenden Sie den MySQL-Autorisierungsbefehl „grant“

Die Beispiele in diesem Artikel laufen auf MySQL ...

Zusammenfassung einiger gängiger Techniken in der Front-End-Entwicklung

1. So zeigen Sie das Datum rechts in der Artikelti...

Sprechen Sie kurz über MySQL Left Join Inner Join

Vorwort Ich war kürzlich damit beschäftigt, ein K...

JS realisiert den Scroll-Effekt von Online-Ankündigungen

In diesem Artikel wird der spezifische JS-Code zu...

Implementierungscode für die Dateimontage von DockerToolBox

Wenn Sie Docker verwenden, stellen Sie möglicherw...

Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode

Sinnvolle Einstellung des MySQL sql_mode sql_mode...

Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

Vor Kurzem habe ich mit shake.js eine ähnliche Fu...