Unterschied zwischen ID- und Namensattributen in HTML


718

Was ist der Unterschied zwischen den idund nameAttributen? Beide scheinen dem gleichen Zweck zu dienen, eine Kennung bereitzustellen.

Ich würde gerne wissen (speziell in Bezug auf HTML-Formulare), ob die Verwendung von beiden aus irgendeinem Grund notwendig oder empfohlen ist.


9
Es gibt einen sehr guten Thread zu diesem Thema unter stackoverflow.com/questions/7470268/html-input-name-vs-id
Richard Logwood

Antworten:


626

Das nameAttribut wird beim Senden von Daten in einer Formularübermittlung verwendet. Unterschiedliche Steuerelemente reagieren unterschiedlich. Beispielsweise können Sie mehrere Optionsfelder mit unterschiedlichen id, aber gleichen Attributen haben name. Bei der Übermittlung enthält die Antwort nur einen Wert - das von Ihnen ausgewählte Optionsfeld.

Natürlich steckt noch mehr dahinter, aber es wird Sie definitiv dazu bringen, in die richtige Richtung zu denken.


Würden Sie bitte ein bisschen mehr darüber beschreiben? Bei der Übermittlung gibt es nur einen Wert in der Antwort - das Optionsfeld, das Sie ausgewählt haben.
NoviceToDotNet

außer Optionsfeld gibt es eine Verwendung? Ich denke es sollte andere große Unterschiede haben ???
Prageeth Godage

28
@Prageeth: Der Unterschied besteht darin, dass ein "Name" vom Browser zum Server übertragen wird und sich von der "ID" unterscheiden kann. Es gibt viele Gründe, warum Menschen diesen Unterschied wollen. Beispielsweise benötigt Ihre serverseitige Sprache / Ihr serverseitiges Framework möglicherweise die übermittelten Werte, um bestimmte Namen zu haben, aber Ihr Javascript funktioniert am besten mit etwas völlig anderem in den IDs.
John Fisher

29
Um es sehr informell idauszudrücken: Ihr Frontend (CSS, JS) arbeitet damit, während nameIhr Server es empfängt und dann verarbeiten kann. Dies ist im Grunde, was Greesos Antwort sagt.
Saraph

2
Es könnte besser sein , zu sagen: Das Attribut name ist erforderlich , wenn das Senden von Daten ... statt: Der Name Attribut wird verwendet , wenn das Senden von Daten ... da alle Formulardaten , die fehlenden Namen Attribut wird nicht übertragen werden (oder auch nicht sein überhaupt gemäß der HTML-Spezifikation verarbeitet)
ebyrob

332

Verwenden Sie nameAttribute für Formularsteuerelemente (z. B. <input>und <select>), da dies die Kennung ist, die im Aufruf POSToder beim GETAufruf des Formulars verwendet wird.

Verwenden Sie idAttribute, wenn Sie ein bestimmtes HTML-Element mit CSS, JavaScript oder einer Fragmentkennung adressieren müssen . Es ist auch möglich, Elemente nach Namen zu suchen, aber es ist einfacher und zuverlässiger , sie nach ID zu suchen.


2
Dies war äußerst klarstellend. Darf ich also schließen, dass "Name" fast eine Darstellung des Parameters "Bezeichner" ist, der an den Server gesendet wird? Diese Frage wird teilweise durch die akzeptierte Antwort beantwortet, aber nicht in diesen Begriffen ausgedrückt.
Thomas

5
@ Thomas: Es gibt keine notwendige Verbindung zwischen nameund idüberhaupt. Der Bezeichner identifiziert ein bestimmtes HTML-Element auf der Seite eindeutig. Im nameGegensatz dazu muss das Attribut eines HTML-Formularelements nicht eindeutig sein und ist es häufig nicht, z. B. bei Optionsfeldern oder Seiten mit mehreren <form>Elementen. Es ist traditionell üblich, dieselbe Zeichenfolge für nameund zu verwenden, idwenn beide für ein einzelnes HTML-Element verwendet werden, aber nichts bringt Sie dazu, dies zu tun.
Warren Young

Ich implementiere einen benutzerdefinierten Textbereich, der einige HTML-Markups interpretieren kann. Dazu habe ich ein contentEditable-Div verwendet. Wenn Sie ein Attribut 'name' hinzufügen, verhält es sich dann so?
Yev

125

Hier ist eine kurze Zusammenfassung:

  • idwird verwendet, um das HTML-Element über das Dokumentobjektmodell zu identifizieren (über JavaScript oder mit CSS gestaltet). idwird voraussichtlich innerhalb der Seite eindeutig sein.

  • nameentspricht dem Formularelement und identifiziert, was an den Server zurückgesendet wird .


27

Siehe diese http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

Was ist der Unterschied? Die kurze Antwort lautet: Verwenden Sie beide und machen Sie sich keine Sorgen. Aber wenn Sie diese Dummheit verstehen wollen, hier ist die dünne:

id = dient zur Verwendung als Ziel wie folgt: <some-element id="XXX"></some-element>für Links wie dieses : <a href="#XXX".

name = wird auch verwendet, um die Felder in der Nachricht, die an einen Server gesendet wird, mit einem HTTP-GET oder POST (HyperText Transfer Protocol) zu kennzeichnen, wenn Sie in einem Formular auf Senden klicken.

id = bezeichnet die Felder zur Verwendung durch JavaScript und Java DOM (Document Object Model). Die Namen in name = müssen innerhalb eines Formulars eindeutig sein. Die Namen in id = müssen im gesamten Dokument eindeutig sein.

Manchmal unterscheiden sich die Namen name = und id =, da der Server denselben Namen von verschiedenen Formularen im selben Dokument oder von verschiedenen Optionsfeldern im selben Formular wie im obigen Beispiel erwartet. Die id = muss eindeutig sein; der Name = darf nicht sein.

JavaScript benötigte eindeutige Namen, aber es gab bereits zu viele Dokumente ohne eindeutigen Namen = Namen, sodass die W3-Leute das ID-Tag erfanden, das eindeutig sein musste. Leider haben ältere Browser das nicht verstanden. Sie benötigen also beide Namensschemata in Ihren Formularen.

HINWEIS: Das Attribut "Name" für einige Tags wie <a>wird in HTML5 nicht unterstützt.


2
Ein bisschen verwirrend ... und ich denke in einigen Punkten falsch. Ist es nicht das: nameist wichtig für <input>Tags in einer <form>Übermittlung, da die Parameter im HTTP verwendet werden, und idist lediglich eine eindeutige Kennung
Don Cheadle

Außerdem verlinkt dieser (nicht registrierte) Benutzer auf seine eigene Seite (der Link in seinem Profil lautet mindprod.com/jgloss ). Ich weiß nicht, ob das ein Problem für SO ist, aber angesichts des ziemlich verwirrenden Schnipsels fühlt es sich unangemessen an.
zb226

23

Die Art und Weise, wie ich darüber nachdenke und es benutze, ist einfach:

id wird für CSS und JavaScript / jQuery verwendet (muss auf einer Seite eindeutig sein)

name wird für die Formularbearbeitung in PHP verwendet, wenn ein Formular über HTML gesendet wird (muss in einem Formular eindeutig sein - bis zu einem gewissen Grad siehe Pauls Kommentar unten)


2
Nicht ganz richtig - das Attribut Name muss in einem Formular nicht eindeutig sein, da es Optionsfelder miteinander verknüpfen kann.
Paul

4
Es mag Sie auch überraschen, aber PHP ist nicht die einzige Serversprache der Welt.
Siehe schärfer

@seesharper - Das ist lustig. Ich habe dich sogar gewählt! Na ja, das überrascht mich nicht :)
Greeso

14

ID-Tag - Wird von CSS verwendet und definiert eine eindeutige Instanz eines Div, Span oder anderer Elemente. Wird im Javascript-DOM-Modell angezeigt, sodass Sie mit verschiedenen Funktionsaufrufen darauf zugreifen können.

Namensschild für Felder - Dies ist pro Formular eindeutig - es sei denn, Sie führen ein Array aus, das Sie an die PHP- / serverseitige Verarbeitung übergeben möchten. Sie können über Javascript namentlich darauf zugreifen, aber ich denke, dass es nicht als Knoten im DOM angezeigt wird oder dass einige Einschränkungen gelten (Sie können beispielsweise .innerHTML nicht verwenden, wenn ich mich richtig erinnere).


9
Optionsfelder müssen denselben Namen haben, um sich ordnungsgemäß zu verhalten - sie sind nicht pro Formular eindeutig.
Nickf

Mein Fehler. Zur Verdeutlichung werden für Texteingaben, Textbereiche usw. Namensschilder verwendet, um sie zu identifizieren. Nicht unbedingt einzigartig.
Extrakun

12

Im Allgemeinen wird davon ausgegangen, dass der Name immer durch die ID ersetzt wird . Dies ist bis zu einem gewissen Grad wahr, aber nicht für , praktisch Formularfelder und Rahmennamen . Bei Formularelementen wird das nameAttribut beispielsweise verwendet, um die Name-Wert-Paare zu bestimmen, die an ein serverseitiges Programm gesendet werden sollen, und sollte nicht entfernt werden. Browsers do not use id in that manner. Um auf der sicheren Seite zu sein, können Sie Namens- und ID-Attribute für Formularelemente verwenden. Also würden wir folgendes schreiben:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

Um die Kompatibilität sicherzustellen, ist es eine gute Idee, übereinstimmende Namens- und ID-Attributwerte zu haben, wenn beide definiert sind. Seien Sie jedoch vorsichtig - einige Tags, insbesondere Optionsfelder, müssen nicht eindeutige Namenswerte haben, erfordern jedoch eindeutige ID-Werte. Dies sollte wiederum darauf hinweisen, dass die ID nicht nur ein Ersatz für den Namen ist. Sie haben einen unterschiedlichen Zweck. Darüber hinaus sollten Sie den Ansatz des alten Stils nicht außer Acht lassen. Ein genauer Blick auf moderne Bibliotheken zeigt, dass ein solcher Syntaxstil manchmal aus Gründen der Leistung und Einfachheit verwendet wird. Ihr Ziel sollte immer die Kompatibilität sein.

In den meisten Elementen wurde das Namensattribut zugunsten des allgegenwärtigeren ID-Attributs verworfen. In einigen Fällen bilden sich jedoch insbesondere Felder (<button> , <input>, <select>und <textarea>), das Namensattribut am Leben, weil es erforderlich werden , weiterhin den Name-Wert - Paar für Formularübermittlung einzustellen. Außerdem stellen wir fest, dass einige Elemente, insbesondere Frames und Links, möglicherweise weiterhin das Namensattribut verwenden, da es häufig nützlich ist, um diese Elemente nach Namen abzurufen.

Es gibt eine klare Unterscheidung zwischen ID und Name. Sehr oft, wenn der Name weitergeht, können wir die Werte gleich einstellen. Die ID muss jedoch eindeutig sein, und der Name sollte in einigen Fällen nicht - denken Sie an Optionsfelder. Leider ist die Eindeutigkeit von ID-Werten, obwohl sie von der Markup-Validierung erfasst wird, nicht so konsistent, wie sie sein sollte. Durch die CSS-Implementierung in Browsern werden Objekte formatiert, die einen gemeinsamen ID-Wert haben. Daher werden Markup- oder Stilfehler, die sich auf unser JavaScript auswirken könnten, möglicherweise erst zur Laufzeit abgefangen.

Dies ist aus dem Buch JavaScript- entnommen. The Complete Reference by Thomas-Powell


4
Ein weiterer Grund, sich nicht daran zu gewöhnen, nur einen ID-Übereinstimmungsnamen zu erstellen: Auf einer Seite befinden sich möglicherweise zwei Formulare, die dieselben Daten übermitteln müssen (z. B. zwei Suchfelder). In diesem Fall namesollte der Code derselbe sein (dem serverseitigen Code ist es egal, welcher gesendet wurde), aber der Code idmuss unterschiedlich sein (da er auf der gesamten Seite eindeutig sein muss).
IMSoP

10

nameist für Linkziele veraltet und in HTML5 ungültig. Zumindest in der neuesten Version von Firefox (v13) funktioniert dies nicht mehr. Wechseln Sie <a name="hello">zu<a id="hello">

Das Ziel muss kein <a>Tag sein, es kann <p id="hello"> oder <h2 id="hello">usw. sein, was häufig sauberer Code ist.

Wie andere Beiträge klar sagen, namewird es immer noch in Formularen verwendet (benötigt). Es wird auch weiterhin in META-Tags verwendet.


Meinen Sie "Name ist für Link-Tags veraltet" anstelle von "Name ist für Link-Ziele veraltet"? Tatsächlich kann das Verbindungsziel ein Iframe sein. Wenn Sie das Namensattribut für diesen Iframe nicht angeben, funktioniert das Zielattribut für den Link nicht. Dieses Verhalten bleibt für alle Browser bestehen und ist HTML5-kompatibel.
Yucer

Ich versuche hier herauszufinden, wie man einen Linkanker erstellt , wie in der Markierung, zu der Sie gehen , wenn Sie eine URL haben, die mit "#something" endet. Das Beste, was ich sagen kann, in HTML vor 4 muss es <a name="something"> sein. In HTML 4 ist es <a name="something" id="something"> (passend) und in HTML 5 <a id="something">, obwohl id ein "globales Attribut" für alles sein kann. Was ich nicht herausfinden kann ist, ob der Name zusätzlich zur ID in <a> in HTML 5 toleriert wird . Ok, experimentiere mit jedem Setup, das ich gerade habe ...
FutureNerd

9
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>


6

name Vs id

Name

  • Name des Elements. Wird beispielsweise vom Server verwendet, um die Felder in Formularübermittlungen zu identifizieren.
  • Unterstützende Elemente sind <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • Der Name muss nicht eindeutig sein.

Ich würde

  • Wird häufig mit CSS verwendet, um ein bestimmtes Element zu formatieren. Der Wert dieses Attributs muss eindeutig sein.
  • ID ist Globale Attribute . Sie können für alle Elemente verwendet werden, obwohl die Attribute möglicherweise keine Auswirkungen auf einige Elemente haben.
  • Muss im gesamten Dokument eindeutig sein.
  • Der Wert dieses Attributs darf im Gegensatz zum Klassenattribut, das durch Leerzeichen getrennte Werte zulässt, keine Leerzeichen enthalten.
  • Verwenden von Zeichen außer ASCII-Buchstaben und -Ziffern '_', '-' und '.' kann Kompatibilitätsprobleme verursachen, da diese in HTML 4 nicht zulässig waren. Obwohl diese Einschränkung in HTML 5 aufgehoben wurde, sollte eine ID aus Kompatibilitätsgründen mit einem Buchstaben beginnen.

Ich habe nameAttribute gesehen , die in Stilelementen verwendet wurden. Ich nehme an, das ist ungültig?
Synetech

5

Die ID eines Formulareingabeelements hat nichts mit den im Element enthaltenen Daten zu tun. IDs dienen zum Verknüpfen des Elements mit JavaScript und CSS. Das Namensattribut wird jedoch in der von Ihrem Browser an den Server gesendeten HTTP-Anforderung als Variablenname verwendet, der den im Wertattribut enthaltenen Daten zugeordnet ist.

Zum Beispiel:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

Wenn das Formular gesendet wird, werden die Formulardaten wie folgt in den HTTP-Header aufgenommen:

Wenn Sie ein ID-Attribut hinzufügen, ändert sich nichts am HTTP-Header. Es wird nur einfacher, es mit CSS und JavaScript zu verknüpfen.


2

Wenn Sie nicht die eigene Übermittlungsmethode des Formulars verwenden, um Informationen an einen Server zu senden (und dies stattdessen mit Javascript tun), können Sie das Attribut name verwenden, um zusätzliche Informationen an eine Eingabe anzuhängen - anstatt sie mit einem versteckten Eingabewert zu koppeln. sieht aber ordentlicher aus, weil es in den Eingang integriert ist.

Dieses Bit funktioniert derzeit noch in Firefox, obwohl es in Zukunft möglicherweise nicht mehr zugelassen wird.

Sie können mehrere Eingabefelder mit demselben Namenswert haben, solange Sie nicht vorhaben, die altmodische Methode einzureichen.


1

Basierend auf persönlichen Erfahrungen und gemäß der Beschreibung der W3-Schulen für Attribute:

ID ist ein globales Attribut und gilt für praktisch alle Elemente in HTML. Es wird verwendet, um Elemente auf der Webseite eindeutig zu identifizieren, und auf seinen Wert wird meistens über das Frontend zugegriffen (normalerweise über JavaScript oder jQuery).

name ist ein Attribut, das für bestimmte Elemente (wie Formularelemente usw.) in HTML nützlich ist. Sein Wert wird meistens zur Verarbeitung an das Backend gesendet.

https://www.w3schools.com/tags/ref_attributes.asp


0

Im Folgenden finden Sie eine interessante Verwendung des ID-Attributs. Es wird innerhalb des Tags verwendet und verwendet, um das Formular für Elemente außerhalb der Grenzen zu identifizieren, damit sie in die anderen Felder des Formulars aufgenommen werden.

 <form action="action_page.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">

0

ID: 1) Es wird verwendet, um das HTML-Element über das Dokumentobjektmodell zu identifizieren (über Javascript oder mit CSS gestaltet). 2) Es wird erwartet, dass die ID innerhalb der Seite eindeutig ist.

Der Name entspricht dem Formularelement und gibt an, was an den Server zurückgesendet wird. Beispiel:

<form action="action_page.php" id="Myform">
 First name: <input type="text" name="FirstName"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="LastName" form="Myform">

0

ID wird verwendet, um ein Element eindeutig zu identifizieren.

Der Name wird in Formularen verwendet. Obwohl Sie ein Formular senden, wird nichts gesendet, wenn Sie keinen Namen angeben. Daher benötigen Formularelemente einen Namen, um durch Formularmethoden wie "get or push" identifiziert zu werden.

Und diejenigen, die nur ein Namensattribut haben, gehen aus.


0

Das idgibt einem Element eine ID. Sobald Sie also echten Code (wie JavaScript) geschrieben haben, können Sie die ID zum Lesen von Elementen verwenden. Das nameist nur ein Name, damit der Benutzer den Namen des Elements sehen kann, denke ich.

Beispiel:

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); //Reads the element that has the id "heading".
</script>
//You can also use something like this:
document.getElementById("heading").value; //Reads the value of the selected element.

Ist es hilfreich? Lassen Sie mich wissen, wenn es Probleme gibt.


0

Es gibt keinen wörtlichen Unterschied zwischen einer ID und einem Namen.

name ist ein Bezeichner und wird in einer vom Browser an den Server gesendeten http-Anforderung als Variablenname verwendet, der den im value-Attribut des Elements enthaltenen Daten zugeordnet ist.

Die ID hingegen ist eine eindeutige Kennung für Browser, Client und JavaScript. Das Formular benötigt daher eine ID, während die Elemente einen Namen benötigen.

id wird insbesondere zum Hinzufügen von Attributen zu eindeutigen Elementen verwendet. In DOM-Methoden wird ID in Javascript verwendet, um auf das spezifische Element zu verweisen, für das Ihre Aktion ausgeführt werden soll.

Zum Beispiel:

<html>
<body>

<h1 id="demo"></h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

Dasselbe kann durch das Namensattribut erreicht werden, es wird jedoch bevorzugt, ID in Form und Name für kleine Formularelemente wie das Eingabe-Tag oder das Select-Tag zu verwenden.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.