Różnica między atrybutami id i name w HTML

715

Jaka jest różnica między atrybutami ida name? Oba wydają się służyć temu samemu celowi, jakim jest dostarczenie identyfikatora.

Chciałbym wiedzieć (szczególnie w odniesieniu do formularzy HTML), czy korzystanie z obu jest konieczne lub zalecane z jakichkolwiek powodów.

Miś Yogi
źródło
9
Jest bardzo dobry wątek na ten temat na stackoverflow.com/questions/7470268/html-input-name-vs-id
Richard Logwood

Odpowiedzi:

624

nameAtrybut jest używany podczas wysyłania danych w przedłożeniu formularza. Różne elementy sterujące reagują inaczej. Na przykład możesz mieć kilka przycisków opcji o różnych idatrybutach, ale takich samych name. Po przesłaniu w odpowiedzi jest tylko jedna wartość - wybrany przycisk opcji.

Oczywiście jest w tym coś więcej, ale na pewno sprawi, że zaczniesz myśleć we właściwym kierunku.

John Fisher
źródło
czy mógłbyś opisać trochę więcej na ten temat .. Po przesłaniu w odpowiedzi jest tylko jedna wartość - wybrany przycisk opcji.
NoviceToDotNet
inne niż przycisk opcji, czy są jakieś zastosowania? Myślę, że powinny mieć inne wielkie różnice?
Prageeth godage
27
@Prageeth: Różnica polega na tym, że „nazwa” przenosi się z przeglądarki na serwer i może być inna niż „id”. Istnieje wiele powodów, dla których ludzie mogą chcieć tej różnicy. Na przykład język / środowisko po stronie serwera może wymagać przesłanych wartości, aby mieć określone nazwy, ale skrypt javascript działa najlepiej z czymś zupełnie innym w identyfikatorach.
John Fisher
28
Mówiąc bardzo nieformalnie, z idtym współpracuje twój frontend (CSS, JS), podczas gdy nameserwer odbiera i może następnie przetwarzać. Tak w zasadzie mówi odpowiedź Greeso.
Saraph,
2
Lepiej byłoby powiedzieć: Atrybut nazwy jest wymagany podczas wysyłania danych ... zamiast: Atrybut nazwy jest używany podczas wysyłania danych ... ponieważ jakiekolwiek dane w formularzu, w których brakuje atrybutu nazwy , nie zostaną przesłane (lub faktycznie nie będą przetworzone w ogóle zgodnie ze specyfikacją HTML)
ebyrob
330

Użyj nameatrybutów do kontrolek formularza (takich jak <input>i <select>), ponieważ jest to identyfikator użyty w wywołaniu POSTlub, GETktóre ma miejsce podczas przesyłania formularza.

Używaj idatrybutów, gdy potrzebujesz zaadresować określony element HTML za pomocą CSS, JavaScript lub identyfikatora fragmentu . Możliwe jest również wyszukiwanie elementów według nazwy, ale łatwiejsze i bardziej niezawodne jest wyszukiwanie ich według identyfikatora.

Warren Young
źródło
2
To było ogromne wyjaśnienie. Czy mogę zatem wnioskować, że ta „nazwa” jest prawie reprezentacją parametru „identyfikator” przesłanego na serwer? Odpowiedź na to pytanie częściowo odpowiada zaakceptowanej odpowiedzi, ale nie została ujęta w tych kategoriach.
Thomas
5
@Thomas: Nie ma potrzeby tie między namei idw ogóle. Identyfikator jednoznacznie identyfikuje określony element HTML na stronie. Natomiast nameatrybut elementu formularza HTML nie musi być unikalny i często nie jest, na przykład w przypadku przycisków opcji lub stron z wieloma <form>elementami. Tradycyjnie używa się tego samego ciągu namei idgdzie oba są używane w jednym elemencie HTML, ale nic nie wymaga tego.
Warren Young,
Wdrażam niestandardowy obszar tekstowy, który może interpretować niektóre znaczniki HTML, w tym celu użyłem div contentEditable. Jeśli dodasz do niego atrybut „name”, czy będzie się tak zachowywał?
yev
124

Oto krótkie podsumowanie:

  • idsłuży do identyfikacji elementu HTML za pomocą modelu obiektowego dokumentu (przez JavaScript lub stylem CSS). idoczekuje się, że będzie unikalny na stronie.

  • nameodpowiada elementowi formularza i identyfikuje to, co jest wysyłane z powrotem na serwer .

Mike Buckbee
źródło
27

Zobacz http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

Co za różnica? Krótka odpowiedź brzmi: używaj obu i nie martw się o to. Ale jeśli chcesz zrozumieć tę głupotę, oto chuda:

ID = ma być stosowany jako cel w ten sposób: <some-element id="XXX"></some-element>dla łączy jak poniżej: <a href="#XXX".

name = służy również do oznaczania pól w wiadomości wysyłanej do serwera za pomocą HTTP (HyperText Transfer Protocol) GET lub POST po naciśnięciu przycisku przesyłania w formularzu.

id = oznacza pola do użycia przez JavaScript i Java DOM (Document Object Model). Nazwy w name = muszą być unikalne w formularzu. Nazwy w id = muszą być unikalne w całym dokumencie.

Czasami nazwy = i id = nazwy będą się różnić, ponieważ serwer oczekuje tej samej nazwy z różnych formularzy w tym samym dokumencie lub różnych przycisków opcji w tej samej formie, jak w powyższym przykładzie. Identyfikator = musi być unikalny; nazwa = nie może być.

JavaScript potrzebował unikalnych nazw, ale było już zbyt wiele dokumentów bez unikalnych nazw = nazw, więc ludzie z W3 wymyślili tag id, który był wymagany. Niestety starsze przeglądarki tego nie rozumiały. Potrzebujesz więc obu schematów nazewnictwa w swoich formularzach.

UWAGA: atrybut „name” dla niektórych tagów, takich jak, <a>nie jest obsługiwany w HTML5.

Roedy Green
źródło
2
Trochę mylące ... i w niektórych punktach uważam, że źle. Czy nie jest to: namejest ważne dla <input>znaczników w <form>zgłoszeniu, ponieważ parametry są używane w HTTP, i idjest jedynie unikalnym identyfikatorem
Don Cheadle
Ponadto ten (niezarejestrowany) użytkownik prowadzi do swojej strony (link w jego profilu mówi mindprod.com/jgloss ). Nie wiem, czy to problem dla SO, ale biorąc pod uwagę dość mylący fragment, wydaje się nieodpowiedni.
zb226,
23

Sposób, w jaki o tym myślę i korzystam jest prosty:

identyfikator jest używany w CSS i JavaScript / jQuery (musi być unikalny na stronie)

nazwa jest używana do obsługi formularzy w PHP, gdy formularz jest przesyłany przez HTML (musi być unikalny w formularzu - do pewnego stopnia zobacz komentarz Pawła poniżej)

Greeso
źródło
2
Nie do końca prawda - atrybut Nazwa nie musi być unikalny w formularzu, ponieważ może łączyć ze sobą przyciski opcji.
Paweł,
4
Może cię to również zaskoczyć, ale PHP nie jest jedynym językiem serwera na świecie.
patrz ostrzejszy
@seesharper - To zabawne. Głosowałem nawet za tobą! Cóż, tak, to mnie nie dziwi :)
Greeso
14

Znacznik ID - używany przez CSS, definiuje unikalne wystąpienie div, span lub innych elementów. Pojawia się w modelu JavaScript DOM, umożliwiając dostęp do nich za pomocą różnych wywołań funkcji.

Tag nazwy dla pól - jest unikalny dla każdego formularza - chyba że wykonujesz tablicę, którą chcesz przekazać do przetwarzania PHP / po stronie serwera. Możesz uzyskać do niego dostęp przez Javascript według nazwy, ale myślę, że nie pojawia się on jako węzeł w DOM lub mogą obowiązywać pewne ograniczenia (nie możesz użyć .innerHTML, na przykład, jeśli dobrze pamiętam).

Extrakun
źródło
9
przyciski radiowe muszą mieć tę samą nazwę, aby zachowywać się poprawnie - nie jest to unikalne dla każdego formularza.
nickf
Mój błąd. Choć dla wyjaśnienia, w przypadku wprowadzania tekstu, obszarów tekstowych itp. Do ich identyfikacji używane są tagi nazw. Nie jest konieczne unikalne.
Extrakun
12

Ogólnie przyjmuje się, że nazwa jest zawsze zastępowana przez id . Jest to do pewnego stopnia prawdziwe, ale praktycznie nie dotyczy pól formularzy i nazw ram . Na przykład w przypadku elementów formularza nameatrybut służy do określania par nazwa-wartość, które mają zostać wysłane do programu po stronie serwera, i nie należy go eliminować. Browsers do not use id in that manner. Aby być bezpiecznym, możesz użyć atrybutów name i id w elementach formularza. Napiszemy więc:

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

Aby zapewnić zgodność, dobrym pomysłem jest posiadanie zgodnych wartości atrybutów nazwa i identyfikator, gdy są one zdefiniowane. Bądź jednak ostrożny - niektóre tagi, zwłaszcza przyciski opcji, muszą mieć nietypowe nazwy, ale wymagają unikalnych wartości identyfikatora. Raz jeszcze powinno to oznaczać, że identyfikator nie jest po prostu zamiennikiem nazwy; mają inny cel. Co więcej, nie pomijaj starego stylu, głębokie spojrzenie na współczesne biblioteki pokazuje taki styl składni używany czasami do celów wydajnościowych i łatwości. Twoim celem zawsze powinna być zgodność.

Teraz w większości elementów atrybut name został wycofany na korzyść bardziej wszechobecnego atrybutu id. Jednak w niektórych przypadkach, szczególnie tworząc pola ( <button>, <input>, <select>, i <textarea>), życie na atrybut name, ponieważ nadal jest wymagane, aby ustawić parę nazwa-wartość składania formularza. Ponadto okazuje się, że niektóre elementy, w szczególności ramki i łącza, mogą nadal używać atrybutu name, ponieważ często jest on przydatny do wyszukiwania tych elementów według nazwy.

Istnieje wyraźne rozróżnienie między identyfikatorem a nazwą. Bardzo często, gdy nazwa jest kontynuowana, możemy ustawić te same wartości. Jednak identyfikator musi być unikalny, a nazwa w niektórych przypadkach nie powinna - pomyśl przyciski radiowe. Niestety, wyjątkowość wartości identyfikacyjnych, choć wychwycona przez sprawdzanie poprawności znaczników, nie jest tak spójna, jak powinna być. Implementacja CSS w przeglądarkach będzie stylizować obiekty o wspólnej wartości id; dlatego nie możemy wyłapać błędów znaczników lub stylów, które mogłyby wpłynąć na nasz JavaScript do czasu uruchomienia.

To pochodzi z książki JavaScript- The Complete Reference by Thomas-Powell

Shirgill Farhan
źródło
4
Kolejny powód, dla którego nie należy nawiązywać zwyczajnego dopasowywania nazwy id: możesz mieć na stronie dwa formularze, które wymagają podania tych samych danych (np. Dwa pola wyszukiwania). W takim przypadku namepowinien być taki sam (kod po stronie serwera nie ma znaczenia, który został przesłany), ale idmusi być inny (ponieważ musi być unikalny na całej stronie).
IMSoP
10

namejest przestarzałe dla celów linków i jest nieprawidłowe w HTML5. Nie działa już przynajmniej w najnowszej przeglądarce Firefox (v13). Zmień <a name="hello">na<a id="hello">

Cel nie musi być <a>tagiem, może być <p id="hello"> lub <h2 id="hello">itp., Co często jest czystszym kodem.

Jak wyraźnie mówią inne posty, namejest nadal używany (potrzebny) w formularzach. Jest nadal używany w tagach META.

użytkownik1454923
źródło
Czy masz na myśli „nazwa jest przestarzała dla tagów linków” zamiast „nazwa jest przestarzała dla celów linków”? W rzeczywistości celem łącza może być element iframe. Jeśli nie określisz atrybutu name dla tego elementu iframe, atrybut docelowy nie będzie działał dla łącza. Zachowanie to nadal obowiązuje dla wszystkich przeglądarek i jest zgodne z HTML5.
yumper
Ja tu próbuje dowiedzieć się, jak zrobić link kotwicy , jak w marker, gdzie udać się , gdy masz URL, który kończy się w „#something”. najlepiej, co mogę powiedzieć, w html przed 4, musi to być <a name="something">. W html 4 jest to <a name="something" id="something"> (pasujące), a w html 5 <a id="something">, chociaż id może być „globalnym atrybutem” na dowolny temat. Nie mogę ustalić, czy nazwa oprócz identyfikatora jest tolerowana w <a> w HTML 5. OK. Eksperymentuj w jakiejkolwiek konfiguracji, jaką miałem ...
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>
Hongtao
źródło
6

name Vs id

imię

  • Nazwa elementu Na przykład używany przez serwer do identyfikacji pól w formularzach przesyłanych.
  • Elementy wspierające są <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • Nazwa nie musi być unikalna.

ID

  • Często używany z CSS do stylizowania określonego elementu. Wartość tego atrybutu musi być unikalna.
  • Id to Globalne atrybuty , można ich używać we wszystkich elementach, chociaż atrybuty mogą nie mieć wpływu na niektóre elementy.
  • Musi być unikalny w całym dokumencie.
  • Wartość tego atrybutu nie może zawierać białych spacji, w przeciwieństwie do atrybutu class, który pozwala na wartości oddzielone spacją.
  • Używanie znaków oprócz liter i cyfr ASCII, „_”, „-” i „.” może powodować problemy ze zgodnością, ponieważ nie były one dozwolone w HTML 4. Chociaż ograniczenie to zostało zniesione w HTML 5, identyfikator powinien zaczynać się od litery oznaczającej zgodność.
Subodh Ghulaxe
źródło
Widziałem nameatrybuty używane w elementach stylu. Zakładam, że to jest nieprawidłowe?
Synetech
5

Identyfikator elementu wejściowego formularza nie ma nic wspólnego z danymi zawartymi w elemencie. Identyfikatory służą do zaczepiania elementu za pomocą JavaScript i CSS. Jednak atrybut name jest wykorzystywany w żądaniu HTTP wysyłanym przez przeglądarkę do serwera jako nazwa zmiennej powiązana z danymi zawartymi w atrybucie value.

Na przykład:

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

Po przesłaniu formularza dane formularza zostaną uwzględnione w nagłówku HTTP w następujący sposób:

Dodanie atrybutu ID nie zmieni niczego w nagłówku HTTP. Ułatwi to połączenie CSS i JavaScript.

orbita
źródło
2

Jeśli nie używasz własnej metody przesyłania formularza do wysyłania informacji na serwer (a zamiast tego używasz javascript), możesz użyć atrybutu name, aby dołączyć dodatkowe informacje do danych wejściowych - raczej jak powiązanie ich z ukrytą wartością wejściową, ale wygląda ładniej, ponieważ jest włączony do wejścia.

Ten bit nadal działa w Firefoksie, ale przypuszczam, że w przyszłości może nie zostać udostępniony.

Możesz mieć wiele pól wejściowych o tej samej wartości nazwy, o ile nie planujesz przesłać w staromodny sposób.

Jon Bray
źródło
1

Na podstawie osobistych doświadczeń i zgodnie z opisem W3 Schools dla atrybutów:

ID jest atrybutem globalnym i dotyczy praktycznie wszystkich elementów HTML. Służy do jednoznacznej identyfikacji elementów na stronie internetowej, a do jego wartości można uzyskać dostęp głównie z poziomu interfejsu użytkownika (zwykle przez JavaScript lub jQuery).

nazwa jest atrybutem przydatnym dla określonych elementów (takich jak elementy formularza itp.) w HTML. Jego wartość jest najczęściej wysyłana do zaplecza w celu przetworzenia.

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

Kojugart
źródło
0

Poniżej znajduje się interesujące użycie atrybutu id. Jest on używany w znaczniku i służy do identyfikacji formularza dla elementów poza granicami, dzięki czemu zostaną one dołączone do innych pól w formularzu.

 <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">
Potok
źródło
0

Id: 1) Służy do identyfikacji elementu HTML za pomocą modelu obiektowego dokumentu (poprzez Javascript lub stylizowany za pomocą CSS). 2) Oczekuje się, że identyfikator będzie unikalny na stronie.

Nazwa odpowiada elementowi formularza i identyfikuje to, co jest wysyłane z powrotem na serwer. Przykład:

<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">
Waqas Ahmed
źródło
0

Identyfikator służy do jednoznacznej identyfikacji elementu.

Nazwa jest używana w formularzach. Chociaż prześlesz formularz, jeśli nie podasz żadnego imienia, nic nie zostanie przesłane. Dlatego elementy formularza wymagają nazwy, aby można je było zidentyfikować za pomocą metod takich jak „get or push”.

I wyjdą tylko te z atrybutem nazwy.

Viyaan Jhiingade
źródło
0

idDa element id, więc raz piszesz prawdziwy kod, (jak JavaScript) można użyć identyfikatora czytać elementy. To nametylko nazwa, więc użytkownik może zobaczyć nazwę elementu, tak myślę.

Przykład:

<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.

Czy to jest pomocne? Daj mi znać, jeśli są jakieś problemy.

Niebezpieczna gra
źródło
0

Nie ma żadnej dosłownej różnicy między identyfikatorem a nazwą.

nazwa jest identyfikatorem i jest używana w żądaniu HTTP wysyłanym przez przeglądarkę do serwera jako nazwa zmiennej powiązana z danymi zawartymi w atrybucie wartości elementu.

Z drugiej strony identyfikator jest unikalnym identyfikatorem przeglądarki, strony klienta i JavaScript, dlatego formularz potrzebuje identyfikatora, a jego elementy wymagają nazwy.

id jest bardziej konkretnie używany w dodawaniu atrybutów do unikalnych elementów. W metodach DOM identyfikator jest używany w JavaScript do odniesienia do określonego elementu, na którym ma się odbywać akcja.

Na przykład:

<html>
<body>

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

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

To samo można osiągnąć za pomocą atrybutu name, ale preferuje się używanie id w formie i nazwie dla małych elementów formularza, takich jak tag wejściowy lub tag select.

addy
źródło