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.
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.
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.
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 .
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.
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)
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).
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
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>
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
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.
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.
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.
- 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ść.
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.
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">
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.
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.
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">
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.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.
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