Zurück zu den Grundlagen: Was ist der Unterschied zwischen dem HTML-Attribut "id" und "name"?

Foto von Maria Teneva auf Unsplash

Was ist ihre Rolle und warum?

Diese Fragen mögen, obwohl sie grundlegend erscheinen mögen, vollkommen angemessen sein, und der Zweck dieser Botschaft besteht darin, sie genau zu beantworten.

Das einfachste (und mächtigste) dieser beiden Elemente ist daher das Attribut 'id'.

Attribut 'Id':

Dieses Attribut wird als globales Attribut betrachtet, das ein gemeinsames Attribut für alle HTML-Elemente enthält. Jedes HTML-Element kann ein ID-Attribut haben. Per Definition wird dieses Attribut als eindeutiger Bezeichner betrachtet und sollte auf der HTML-Seite eindeutig sein.

Warum das?

Das id-Attribut wird hauptsächlich für den direkten Zugriff auf das Element in JavaScript verwendet. Anwendungsbeispiel:

var myElement = document.getElementById ('myelementid');

Ein weiteres Szenario, das verwendet werden kann (je nach Szenario ein besserer Ansatz für die Verwendung wiederverwendbarer Klassen), ist die Verwendung von CSS-Stilen, z.

#myelementid {Hintergrundfarbe: rot; }}

Namensattribut:

Das Namensattribut gilt andererseits für bestimmte HTML-Elemente wie Eingabe, Schaltfläche, Auswahl und mehr.

Warum das?

Das Attribut name wird verwendet, um Formulardaten an den Webserver zu senden. Wenn wir ein Formular senden, werden die Eingabe, Schaltfläche, Auswahl usw. in Ihren HTML-Elementen mit dem Attribut und nicht mit dem Namen gesendet - was sehr wichtig ist!

Betrachten Sie das folgende HTML-Element:

Dieser Artikel:

  • Es ist eine Art Texteingabeelement, mit dem Sie Textzeichen eingeben können
  • Enthält 'Superuser'-Text
  • Das id-Attribut hat den Wert "Benutzername"
  • Das Attribut name enthält den Wert "myusername"
  • Sie können ihn kontaktieren über:
document.getElementById ('Benutzername'). value = 'megauser';
  • Sie können auch mit der Namensauswahl interagieren (OK, Sie können dies tun, es wird jedoch empfohlen, das ID-Attribut zu verwenden, da es effizienter ist):
document.querySelector ("input [name = 'myusername']"). value = 'testuser';
  • Sie können CSS-Stile mit der ID-Auswahl verwenden:
#Benutzername {Schriftgröße: 700}
  • Sie können auch CSS-Stile mit der Auswahl verwenden (Sie können dies tun, dies wird jedoch nicht empfohlen, da in diesem Fall Ihre Stile eng mit Ihrem Dokument verbunden sind. Wenn Sie das Element umbenennen, gehen die Stile verloren.):
input [name = 'myusername'] {fill: 20px; }}

Wenn das Formular jedoch an den Server gesendet wird, wird das ID-Attribut nicht verwendet und der Wert des Attributs erhöht sich. In diesem Fall wird der Eingabewert mit dem Wert "Superuser" sowie dem Wert "Name" des entsprechenden Elements gesendet. Die bereitgestellten Informationen lauten also wie folgt:

myusername = superuser

Kann ich ein HTML-Element mit diesen beiden Attributen erhalten?

Natürlich ergänzen sich diese beiden HTML-Attribute. Sie können eine ID verwenden, um Daten an den Server zu übertragen und mit JavaScript oder CSS und Namen zu interagieren.

In der HTML 3.2-Spezifikation (Januar 1997) finden Sie detaillierte Links zu Attributen und die einzige Referenz für die ID:

HTML hat in dieser Version keine ID-, CLASS- und STYLE-Attribute.

Es wird der Schluss gezogen, dass das Namensattribut zuerst erstellt wurde und später die ID.

Referenzen: