583 Stimmen

HTML-Eingabe - Name vs. id

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?

303voto

Kumar Akarsh Punkte 4914

In HTML4.01:

Name Attribut

  • Gültig nur für <a> , <form> , <iframe> , <img> , <map> , <input> , <select> , <textarea>
  • Der Name muss nicht eindeutig sein und kann verwendet werden, um Elemente wie Optionsfelder und Kontrollkästchen zusammenzufassen.
  • Kann nicht in der URL referenziert werden, obwohl es, da JavaScript und PHP die URL sehen können, Umgehungsmöglichkeiten gibt
  • Wird in JavaScript referenziert mit getElementsByName()
  • teilt sich denselben Namensraum wie die id Attribut
  • Muss mit einem Buchstaben beginnen
  • Nach den Spezifikationen wird zwischen Groß- und Kleinschreibung unterschieden, aber die meisten modernen Browser scheinen dies nicht zu beachten
  • Wird in Formularelementen verwendet, um Informationen zu übermitteln. Nur Eingabe-Tags mit einem name Attribut an den Server übermittelt werden

Id Attribut

  • Gültig für jedes Element außer <base> , <html> , <head> , <meta> , <param> , <script> , <style> , <title>
  • Jede Id sollte eindeutig sein in der Seite wie sie im Browser gerendert werden, die sich alle im selben Verzeichnis befinden können oder auch nicht Datei
  • Kann als Ankerreferenz in der URL verwendet werden
  • Wird im CSS oder in der URL referenziert mit # Zeichen
  • Wird in JavaScript referenziert mit getElementById() und jQuery von $(#<id>)
  • Teilt den gleichen Namensraum wie das Attribut name
  • Muss mindestens ein Zeichen enthalten
  • Muss mit einem Buchstaben beginnen
  • Darf nichts anderes als Buchstaben, Zahlen, Unterstriche ( _ ), Bindestriche ( - ), Doppelpunkte ( : ), oder Punkte ( . )
  • Groß- und Kleinschreibung wird nicht berücksichtigt

In (X)HTML5 ist alles gleich, außer:

Name Attribut

  • Nicht gültig für <form> mehr
  • XHTML schreibt vor, dass alles klein geschrieben werden muss, aber die meisten Browser halten sich nicht daran

Id Attribut

  • Gültig für jedes Element
  • XHTML schreibt vor, dass alles klein geschrieben werden muss, aber die meisten Browser halten sich nicht daran

Diese Frage wurde geschrieben, als HTML4.01 die Norm war und viele Browser und Funktionen anders waren als heute.

201voto

Michiel Standaert Punkte 3974

Das Attribut name wird z. B. für die Übermittlung an einen Webserver verwendet. Das id wird hauptsächlich für CSS (und JavaScript) verwendet. Angenommen, Sie haben diese Einstellung:

<input id="message_id" name="message_name" type="text" />

Um den Wert mit PHP zu erhalten, wenn Sie Ihr Formular abschicken, wird es die Name Attribut, etwa so:

$_POST["message_name"];

Die id wird, wie gesagt, für das Styling verwendet, wenn Sie bestimmte CSS-Inhalte verwenden möchten.

#message_id
{
    background-color: #cccccc;
}

Natürlich können Sie die gleiche Stückelung für Ihre id y Name Attribut. Diese beiden werden sich nicht gegenseitig beeinträchtigen.

Auch, Name kann für mehrere Elemente verwendet werden, z. B. wenn Sie Optionsfelder verwenden. Name wird dann verwendet, um Ihre Optionsfelder zu gruppieren, damit Sie nur eine dieser Optionen auswählen können.

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

Und in diesem ganz speziellen Fall kann ich außerdem sagen, wie id verwendet, da Sie wahrscheinlich eine Beschriftung mit Ihrem Optionsfeld wünschen. Label hat eine für Attribut, das die id Ihrer Eingabe, um dieses Etikett mit Ihrer Eingabe zu verknüpfen (wenn Sie auf das Etikett klicken, wird die Schaltfläche aktiviert). Ein Beispiel finden Sie unten

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>

72voto

Robert Koritnik Punkte 100480

IDs müssen eindeutig sein

...innerhalb des DOM-Elementbaums der Seite, so dass jedes Steuerelement individuell zugänglich durch seine id auf der Client-Seite (innerhalb der Browser-Seite) durch

  • In die Seite geladene JavaScript-Skripte
  • Auf der Seite definierte CSS-Stile

Wenn Sie nicht eindeutige IDs auf Ihrer Seite haben, wird Ihre Seite zwar immer noch gerendert, aber sie wird sicherlich nicht gültig sein. Browser sind recht nachsichtig beim Parsen von ungültigem HTML. es scheint dass es funktioniert.

Namen sind oft einzigartig, können aber gemeinsam genutzt werden

...innerhalb des Seiten-DOMs zwischen mehreren Steuerelementen desselben Typs (z.B. Radiobuttons), so dass bei der Übertragung von Daten POSTED an den Server wird nur ein bestimmter Wert gesendet. Wenn Sie also mehrere Optionsschaltflächen auf Ihrer Seite haben, wird nur der Wert der ausgewählten Schaltfläche value an den Server zurückgeschickt wird, obwohl es mehrere verwandte Optionsschaltflächen mit der gleichen name .

Zusatz zum Senden von Daten an den Server : Wenn Daten an den Server gesendet werden (in der Regel mittels einer HTTP POST-Anfrage), werden alle Daten als Name-Werte-Paare donde Name es el name des HTML-Eingabefeldes und Wert ist seine value wie vom Benutzer eingegeben/ausgewählt. Dies gilt immer für Nicht-Ajax-Anfragen. Bei Ajax-Anfragen Name-Wert-Paare kann unabhängig von HTML-Eingabeelementen auf der Seite sein, da die Entwickler alles an den Server senden können, was sie wollen. Oft werden Werte auch aus Eingabefeldern gelesen, aber ich will damit nur sagen, dass dies nicht unbedingt der Fall sein muss.

Wenn Namen dupliziert werden können

Manchmal kann es von Vorteil sein, wenn die Namen von Steuerelementen eines beliebigen Formular-Eingabetyps gemeinsam genutzt werden. Aber wann? Sie haben nicht angegeben, was Ihre Serverplattform sein könnte, aber wenn Sie etwas verwenden wie ASP.NET MVC erhalten Sie den Vorteil der automatischen Datenvalidierung (Client und Server) und der Bindung der gesendeten Daten an starke Typen. Das bedeutet, dass diese Namen mit den Namen der Typeneigenschaften übereinstimmen müssen.

Nehmen wir an, Sie haben folgendes Szenario:

  • Sie haben eine Ansicht mit einer Liste von Elementen desselben Typs
  • der Benutzer arbeitet in der Regel jeweils mit einem Element, d. h. er gibt nur Daten für ein Element ein und sendet sie an den Server

Das Modell Ihrer Ansicht (da sie eine Liste anzeigt) ist also vom Typ IEnumerable<SomeType> , aber Ihre Serverseite akzeptiert nur ein einziges Element des Typs SomeType .

Wie steht es dann mit der gemeinsamen Nutzung von Namen?

Jeder Artikel ist in einer eigenen Hülle verpackt FORM Element und die darin enthaltenen Eingabeelemente haben dieselben Namen, so dass die Daten, wenn sie zum Server gelangen (von einem beliebigen Element), korrekt an den von der Controller-Aktion erwarteten String-Typ gebunden werden.

Dieses spezielle Szenario ist auf meiner Website zu sehen Kreative Geschichten Mini-Site. Sie werden die Sprache nicht verstehen, aber Sie können sich diese Mehrfachformulare und gemeinsamen Namen ansehen. Vergessen Sie, dass ID s werden ebenfalls dupliziert (was einen Regelverstoß darstellt), aber das könnte gelöst werden. Es spielt in diesem Fall einfach keine Rolle.

36voto

Javarome Punkte 9255
  • name identifiziert Formular Felder * so dass sie von Steuerelementen gemeinsam genutzt werden können, die mehrere mögliche Werte für ein solches Feld darstellen (Optionsfelder, Kontrollkästchen). Sie werden als Schlüssel für Formularwerte übermittelt.
  • id identifiziert DOM Elemente; sie können also mit CSS oder JavaScript angesprochen werden.

* <em>Name </em>sind auch <em>verwendet, um </em>lokale Anker identifizieren, aber das ist veraltet und 'id' ist heutzutage der bevorzugte Weg, dies zu tun.

15voto

GolezTrol Punkte 111587

name ist der Name, der verwendet wird, wenn der Wert übergeben wird (in der URL oder in den gebuchten Daten). id wird verwendet, um Einzigartig das Element für CSS-Styling und JavaScript identifizieren.

El id kann auch als Anker verwendet werden. In den alten Tagen, <a name wurde dafür verwendet, aber Sie sollten die id auch bei Ankern. name dient nur der Buchung von Formulardaten.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X