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?
- Unterschied zwischen den Attributen id und name in HTML (20 Antworten )
Antworten
Zu viele Anzeigen?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.
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>
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 seinevalue
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.
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.
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.
- See previous answers
- Weitere Antworten anzeigen