HTML-Eingabe - Name vs. id

Question

Bei Verwendung des HTML <input> Tag, was ist der Unterschied zwischen der Verwendung des name y id Attribute vor allem, dass ich festgestellt habe, dass sie manchmal den gleichen Namen tragen?

Answer 1

Hinzufügen einiger konkreter Verweise auf W3C Dokumentation, in der die Rolle des Attributs "name" bei Formularelementen verbindlich erklärt wird. (Ich bin hier gelandet, als ich untersuchte, wie genau Stripe.js arbeitet an der Umsetzung einer sicheren Interaktion mit dem Zahlungsgateway Streifen . Was bewirkt insbesondere, dass ein Formulareingabeelement an den Server zurückgesendet wird, oder was verhindert, dass es gesendet wird?)

Die folgende W3C-Dokumentation ist relevant:

HTML 4: https://www.w3.org/TR/html401/interact/forms.html#control-name Abschnitt 17.2 Kontrollen

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission-0 y https://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set Abschnitt 4.10.22.4 Aufbau des Formular-Datensatzes.

Wie dort erläutert, wird ein Eingabeelement nur dann vom Browser übermittelt, wenn es ein gültiges "name"-Attribut hat.

Wie bereits erwähnt, identifiziert das Attribut "id" DOM-Elemente eindeutig, ist aber nicht an der normalen Formularübermittlung beteiligt. (Obwohl "id" oder andere Attribute natürlich von JavaScript verwendet werden können, um Formularwerte zu erhalten, die JavaScript dann für folgende Zwecke verwenden könnte Ajax Einreichungen und so weiter).

Eine Merkwürdigkeit in Bezug auf frühere Antworten/Kommentare betrifft die Tatsache, dass die Werte von id und name im selben Namespace liegen. Soweit ich aus den Spezifikationen entnehmen kann, galt dies für einige veraltete Verwendungen des Attributs name (nicht für Formularelemente). Zum Beispiel https://www.w3.org/TR/html5/obsolete.html :

"Autoren sollten das Attribut name nicht für ein Element angeben. Wenn das Attribut vorhanden ist, darf sein Wert nicht die leere Zeichenkette sein und darf weder gleich dem Wert einer der IDs im Home-Teilbaum des Elements sein, außer der eigenen ID des Elements, falls vorhanden, noch gleich dem Wert eines der anderen name-Attribute auf einem Element im Home-Teilbaum des Elements. Wenn dieses Attribut vorhanden ist und das Element eine ID hat, dann muss der Wert des Attributs gleich der ID des Elements sein. In früheren Versionen der Sprache war dieses Attribut dazu gedacht, mögliche Ziele für Fragmentbezeichner in URLs anzugeben. Stattdessen sollte das id-Attribut verwendet werden."

In diesem speziellen Fall gibt es eindeutig eine Überschneidung zwischen id- und name-Werten für "a"-Tags. Dies scheint jedoch eine Besonderheit bei der Verarbeitung von Fragment-IDs zu sein und nicht auf eine allgemeine gemeinsame Nutzung des Namensraums von IDs und Namen zurückzuführen zu sein.

Answer 2

Ein interessanter Fall der Verwendung desselben Namens: input Elemente des Typs checkbox wie diese:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

Wenn Sie beide Kästchen ankreuzen, werden Ihre POST-Daten angezeigt, zumindest wenn die Antwort von PHP verarbeitet wird:

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

Ich weiß nicht, ob diese Art von Array-Konstruktion bei anderen serverseitigen Sprachen vorkommt, oder ob der Wert der name Attribut wird nur als Zeichenkette behandelt, und es ist ein Glücksfall der PHP-Syntax, dass ein 0-basiertes Array auf der Grundlage der Reihenfolge der Daten in der POST-Antwort erstellt wird, was einfach ist:

myfruit[]       apple
myfruit[]       orange

Diese Art von Trick ist mit IDs nicht möglich. Ein paar Antworten in Was sind gültige Werte für das Attribut id in HTML? scheinen die Spezifikation für HTML 4 zu zitieren (obwohl sie keine Quellenangabe machen):

ID- und NAME-Tokens müssen mit einem Buchstaben ([A-Za-z]) beginnen und können gefolgt von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstriche ("_"), Doppelpunkte (":") und Punkte (".") folgen.

Also die Zeichen [ y ] sind weder in ids noch in Namen in HTML4 gültig (in HTML5 wären sie in Ordnung). Aber wie bei so vielen Dingen HTML, nur weil es nicht gültig ist, bedeutet nicht, es wird nicht funktionieren oder ist nicht extrem nützlich.

Answer 3

Wenn Sie JavaScript/CSS verwenden, müssen Sie die 'id' eines Steuerelements verwenden, um CSS/JavaScript-Elemente darauf anzuwenden.

Wenn Sie Name wird CSS für dieses Steuerelement nicht funktionieren. Wenn Sie zum Beispiel einen JavaScript-Kalender verwenden, der an ein Textfeld angehängt ist, müssen Sie die id des Textsteuerelements, um ihm den JavaScript-Kalender zuzuweisen.