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

Jaka jest różnica pomiędzy atrybutami id i 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 używanie obu tych form jest konieczne lub zachęcane z jakichkolwiek powodów.

Author: albert, 2009-09-09

19 answers

Atrybut name jest używany podczas wysyłania danych w formularzu. Różne kontrolki reagują inaczej. Na przykład możesz mieć kilka przycisków opcji z różnymi atrybutami id, ale tymi samymi name. W odpowiedzi znajduje się tylko jedna wartość - wybrany przez Ciebie przycisk radiowy.

Oczywiście, jest w tym coś więcej, ale to na pewno sprawi, że pomyślisz we właściwym kierunku.

 667
Author: John Fisher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-07 10:07:54

Użyj atrybutów name do kontroli formularza (takich jak <input> i <select>), ponieważ jest to identyfikator używany w wywołaniu POST lub GET, które ma miejsce podczas przesyłania formularza.

Użyj atrybutów id, Gdy potrzebujesz zaadresować konkretny element HTML za pomocą CSS, JavaScript lub identyfikatora fragmentu. Możliwe jest również szukanie elementów Po nazwie, ale łatwiejsze i bardziej niezawodne jest szukanie ich po ID.

 350
Author: Warren Young,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:24

Oto krótkie podsumowanie:

  • id jest używany do identyfikacji elementu HTML poprzez dokument Model obiektowy (poprzez JavaScript lub stylizowane na CSS). id oczekuje się być unikalnym w obrębie strony.

  • name odpowiada elementowi formularza i identyfikuje to, co jest umieszczone powrót do serwera .

 148
Author: Mike Buckbee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55

Zobacz to 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 = jest do użycia jako cel taki jak ten: {[0] } dla linków takich jak ten: <a href="#XXX".

Name= jest również używany do oznaczania pól w wiadomości wysyłanej na serwer za pomocą protokołu HTTP (HyperText Transfer Protocol) GET lub POST po naciśnięciu Wyślij w forma.

Id = oznacza pola używane 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 name= i id = będą się różnić, ponieważ serwer oczekuje tej samej nazwy od różnych formularzy w tym samym dokumencie lub różnych przycisków radiowych w tej samej formie, jak w powyższym przykładzie. Id = musi być unikalne; nazwa= nie może być.

JavaScript needed unique nazwy, ale było tu zbyt wiele dokumentów bez unikalnych nazw = nazw, więc ludzie z W3 wymyślili tag id, który musiał być unikalny. Niestety starsze przeglądarki tego nie rozumiały. Więc potrzebujesz obu schematów nazewnictwa w formularzach.

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

 27
Author: Roedy Green,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-30 20:41:49

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

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

Nazwa jest używana do obsługi formularza na serwerze, gdy formularz jest przesyłany przez HTML (musi być unikalny w formularzu - w pewnym stopniu zobacz komentarz Paul poniżej)

 27
Author: Greeso,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-01 18:31:26

ID tag-używany przez CSS, Definiuje unikalną instancję elementu 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.

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

 14
Author: Extrakun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-09 05:09:35

Ogólnie przyjmuje się, że nazwa jest zawsze zastępowana przez id . Jest to w pewnym stopniu prawdą, ale praktycznie nie dla pól formularzy i nazw ramek. Na przykład w przypadku elementów formularza atrybut name jest używany do określania par Nazwa-Wartość, które mają być wysłane do programu po stronie serwera i nie powinien być eliminowany. Browsers do not use id in that manner. Aby zachować bezpieczeństwo, możesz użyć atrybutów name i id na elementach formularza. Tak więc napiszemy:

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

To zapewnienie kompatybilności, posiadanie pasujących wartości atrybutów name i id, gdy oba są zdefiniowane, jest dobrym pomysłem. Należy jednak uważać-niektóre znaczniki, w szczególności przyciski radiowe, muszą mieć unikalne wartości nazw, ale wymagają unikalnych wartości id. po raz kolejny powinno to odnosić się do tego, że id nie jest tylko zamiennikiem nazwy; są one różne w celu. Co więcej, nie należy lekceważyć podejścia w starym stylu, głębokie spojrzenie na nowoczesne biblioteki pokazuje taki styl składni używany do celów wydajności i łatwości czasami. Twój cel zawsze powinien być na korzyść zgodności.

Teraz w większości elementów atrybut name został wycofany na rzecz bardziej wszechobecnego atrybutu id. Jednak w niektórych przypadkach, szczególnie pola formularzy(<button>, <input>, <select>, i <textarea>), atrybut name żyje, ponieważ nadal wymagane jest ustawienie pary nazwa-wartość do przesłania formularza. Okazuje się również, że niektóre elementy, w szczególności ramki i łącza, mogą nadal używać atrybutu name, ponieważ często przydatne do pobierania tych elementów Po nazwie.

Istnieje wyraźne rozróżnienie między identyfikatorem a nazwą. Bardzo często, gdy nazwa jest włączona, możemy ustawić te same wartości. Jednak id musi być unikalne, a nazwa w niektórych przypadkach nie powinna myśleć przycisków radiowych. Niestety, unikalność wartości id, choć przechwytywana przez walidację znaczników, nie jest tak spójna, jak powinna być. Implementacja CSS w przeglądarkach będzie stylizować obiekty, które mają wartość id; w związku z tym możemy nie wychwycić błędów znaczników lub stylów, które mogłyby wpływa na nasz JavaScript aż do czasu uruchomienia.

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

 12
Author: Farhan Shirgill Ansari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-08 06:13:26
<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>
 11
Author: Hongtao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-21 18:12:54

Ten link zawiera odpowiedzi na to samo podstawowe pytanie, ale zasadniczo id jest używany do identyfikacji skryptów, a nazwa jest po stronie serwera.

Http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html

 9
Author: James Black,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-09 05:01:16

name jest przestarzały dla celów łącza i nieprawidłowy w HTML5. Nie działa już przynajmniej w najnowszej wersji Firefoksa (v13). Zmień <a name="hello"> na <a id="hello">

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

Jak wyraźnie mówią inne posty, name jest nadal używany (potrzebny) w formularzach. Jest również nadal używany w Meta tagach.

 9
Author: user1454923,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-11 08:41:35

ID elementu wejściowego formularza nie ma nic wspólnego z danymi zawartymi w elemencie. Identyfikatory służą do podpięcia elementu za pomocą JavaScript i CSS. Atrybut name jest jednak używany 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>

Gdy formularz zostanie przesłany, dane formularza zostaną zawarte w nagłówku HTTP w następujący sposób:

Jeśli dodasz ID atrybut, nie zmieni niczego w nagłówku HTTP. Ułatwi to podłączenie go do CSS i JavaScript.

 7
Author: orbit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-18 16:09:59

name Vs id

Nazwa

  • Nazwa elementu. Na przykład wykorzystywane przez serwer do identyfikacji pola w formularzu.
  • elementy nośne to <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 stylizacji określonego elementu. Wartość tego atrybut musi być unikalny.
  • Id to atrybuty Globalne , mogą być używane na wszystkich elementach, choć na 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 atrybut class, który pozwala na wartości rozdzielone spacjami.
  • używanie znaków z wyjątkiem liter i cyfr ASCII,"_", " - "i".' mogą powodować problemy ze zgodnością, ponieważ nie były dozwolone w HTML 4. Chociaż to ograniczenie zostało zniesione w HTML 5, identyfikator powinien zaczynać się z listem do kompatybilność.
 6
Author: Subodh Ghulaxe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-28 04:43:04

Jeśli nie używasz własnej metody submit formularza do wysyłania informacji na serwer (i zamiast tego robisz to za pomocą javascript), możesz użyć atrybutu name, aby dołączyć dodatkowe informacje do wejścia - raczej jak parowanie go z ukrytą wartością wejściową, ale wygląda lepiej, ponieważ jest włączona do wejścia.

Ten bit nadal działa w Firefoksie, chociaż przypuszczam, że w przyszłości może nie być dozwolony.

Możesz mieć wiele pól wejściowych z tym samym wartość nazwy, tak długo, jak nie planujesz złożyć staromodny sposób.

 2
Author: Jon Bray,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-28 20:45:57

Id : 1) służy do identyfikacji elementu HTML za pomocą modelu obiektowego dokumentu (poprzez Javascript lub stylizowane za pomocą CSS). 2) oczekuje się, że Id będzie unikalne na stronie.

Nazwa odpowiada elementowi formularza i identyfikuje to, co jest wysyłane z powrotem do serwera. 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">
 1
Author: Waqas Ahmed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-12 10:48:41

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

ID jest atrybutem globalnym i dotyczy praktycznie wszystkich elementów w HTML. Jest on używany do unikalnej identyfikacji elementów na stronie internetowej, a jego wartość jest najczęściej dostępna z frontend (zazwyczaj przez JavaScript lub jQuery).

Name jest atrybutem, który jest przydatny dla określonych elementów (takich jak Elementy formularza, itp.) w HTML. Jego wartość jest najczęściej wysyłana do backendu w celu przetworzenia.

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

 1
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-24 03:53:01

ID służy do jednoznacznej identyfikacji elementu.

Nazwa jest używana w formularzach.Chociaż przesyłasz formularz, jeśli nie podasz żadnego nazwiska, nic nie zostanie przesłane. Dlatego Elementy formularza potrzebują nazwy, aby zostać zidentyfikowane za pomocą metod formularza ,takich jak"get lub push".

I wyjdą tylko te z atrybutem name.

 1
Author: Viyaan Jhiingade,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-27 16:04:10

Poniżej znajduje się interesujące zastosowanie atrybutu id. Jest on używany w znaczniku i używany do identyfikacji formularza dla elementów poza granicami, tak aby były dołączane 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">
 0
Author: Brook,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-19 06:58:53

id nada elementowi id, więc po napisaniu prawdziwego kodu, (jak JavaScript) możesz użyć id do odczytu elementów. name jest tylko nazwą, 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 pomocne? Daj mi znać, jeśli będą jakieś problemy.
 0
Author: Dangerousgame,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-19 08:42:41

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

Name jest identyfikatorem i jest używany w żądaniu http wysyłanym przez przeglądarkę do serwera jako nazwa zmiennej powiązana z danymi zawartymi w atrybucie value elementu.

Id z drugiej strony jest unikalnym identyfikatorem dla przeglądarki, klienta i JavaScript.Stąd form potrzebuje id, podczas gdy jego elementy potrzebują nazwy.

Id jest dokładniej używane przy dodawaniu atrybutów do unikalnych elements.In metody DOM, Id jest używane w Javascript do odwoływania się do konkretnego elementu, na którym ma mieć miejsce twoja akcja.

Na przykład:

<html>
<body>

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

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

To samo można uzyskać za pomocą atrybutu name, ale preferowane jest użycie id w formularzu I name dla małych elementów formularza, takich jak znacznik wejściowy lub znacznik select.

 0
Author: Aditi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-22 20:54:30