Разница между атрибутами id и name в HTML

718

В чем разница между idи nameатрибутами? Похоже, что они оба служат одной и той же цели - предоставить идентификатор.

Я хотел бы знать (в частности, в отношении HTML-форм), необходимо или не нужно использовать и то, и другое по каким-либо причинам.

yogibear
источник
9
На эту тему есть очень хорошая тема по адресу stackoverflow.com/questions/7470268/html-input-name-vs-id
Ричард Логвуд

Ответы:

626

nameАтрибут используется при передаче данных в форме представления. Различные элементы управления реагируют по-разному. Например, у вас может быть несколько переключателей с разными idатрибутами, но одинаковыми name. При отправке в ответе присутствует только одно значение - выбранная вами радиокнопка.

Конечно, это еще не все, но это определенно заставит вас думать в правильном направлении.

Джон Фишер
источник
Не могли бы вы описать немного подробнее об этом ... Когда вы отправите запрос, в ответе будет только одно значение - выбранная вами радиокнопка.
NoviceToDotNet
кроме радио кнопки есть ли использование? Я думаю, что у этого должны быть большие различия кроме этого ???
Prageeth Godage
28
@Prageeth: Разница в том, что «имя» передается из браузера на сервер и может отличаться от «id». Есть много причин, по которым люди могут хотеть эту разницу. Например, вашему серверному языку / среде может потребоваться, чтобы переданные значения имели определенные имена, но ваш javascript лучше всего работает с чем-то совершенно другим в идентификаторах.
Джон Фишер
29
Проще говоря, это то, с idчем работает ваш интерфейс (CSS, JS), а то name, что ваш сервер получает и может затем обработать. Это в основном то, что говорит ответ Greeso.
Сараф
2
Может быть лучше сказать: атрибут name требуется при отправке данных ... вместо: атрибут name используется при отправке данных ... поскольку любые данные формы, в которых отсутствует атрибут name , не будут переданы (или действительно не будут обрабатывается вообще в соответствии со спецификацией HTML)
ebyrob
332

Используйте nameатрибуты для элементов управления формы (например, <input>и <select>), так как это идентификатор, используемый в вызове POSTили, GETкоторый происходит при отправке формы.

Используйте idатрибуты всякий раз, когда вам нужно обратиться к конкретному элементу HTML с помощью CSS, JavaScript или идентификатора фрагмента . Можно также искать элементы по имени, но проще и надежнее искать их по ID.

Уоррен Янг
источник
2
Это было чрезвычайно разъясняющим. Итак, могу ли я сделать вывод, что «имя» является почти представлением параметра «идентификатор», отправляемого на сервер? На этот вопрос частично отвечает принятый ответ, но он не входит в эти термины.
Томас
5
@ Томас: Нет никакой необходимой связи между nameи idвообще. Идентификатор уникально идентифицирует определенный элемент HTML на странице. nameАтрибут элемента формы HTML, наоборот, не должны быть уникальными, и часто это не так , например, с помощью переключателей или страниц с несколькими <form>элементами. Традиционно для одной nameи той же idHTML-элемента используется одна и та же строка, где они используются, но ничто не заставляет вас делать это.
Уоррен Янг
Я реализую пользовательскую текстовую область, которая может интерпретировать некоторую HTML-разметку, для этого я использовал div contentEditable. Если добавить к нему атрибут name, будет ли он вести себя так?
Ев
126

Вот краткое резюме:

  • idиспользуется для идентификации элемента HTML через объектную модель документа (с помощью JavaScript или в стиле CSS). idкак ожидается, будет уникальным на странице.

  • nameсоответствует элементу формы и определяет, что отправлено обратно на сервер .

Майк Бакби
источник
27

Смотрите это http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

Какая разница? Короткий ответ: используйте оба и не беспокойтесь об этом. Но если вы хотите понять эту глупость, вот тощий:

ID = для использования в качестве цели , как это: <some-element id="XXX"></some-element>ссылки , как это: <a href="#XXX".

name = также используется для обозначения полей в сообщении, отправляемых на сервер с помощью HTTP (HyperText Transfer Protocol) GET или POST, когда вы нажимаете кнопку Отправить в форме.

id = обозначает поля для использования JavaScript и Java DOM (объектная модель документа). Имена в name = должны быть уникальными внутри формы. Имена в id = должны быть уникальными во всем документе.

Иногда имена name = и id = будут отличаться, потому что сервер ожидает одно и то же имя от различных форм в одном и том же документе или различных переключателей в той же форме, что и в примере выше. Идентификатор = должен быть уникальным; имя = не должно быть

JavaScript требовал уникальных имен, но здесь уже было слишком много документов без уникальных name = names, поэтому специалисты W3 изобрели тег id, который должен был быть уникальным. К сожалению, старые браузеры этого не поняли. Таким образом, вам нужны обе схемы именования в ваших формах.

ПРИМЕЧАНИЕ: атрибут «имя» для некоторых тегов, подобных как <a>, не поддерживается в HTML5.

Роди Грин
источник
2
Немного смущает ... и я думаю, что неправильно в некоторых моментах. Разве это не так: nameважно для <input>тегов в <form>представлении, поскольку параметры используются в HTTP, и idявляется просто уникальным идентификатором
Дон Чидл,
Кроме того, этот (незарегистрированный) пользователь ссылается на свою страницу (ссылка в его профиле говорит mindprod.com/jgloss ). Я не знаю, если это проблема для SO, но, учитывая довольно запутанный фрагмент, он кажется неуместным.
zb226
24

Способ, которым я думаю об этом и использую его, прост:

id используется для CSS и JavaScript / jQuery (должен быть уникальным на странице)

имя используется для обработки формы в PHP, когда форма отправляется через HTML (должна быть уникальной в форме - в некоторой степени, см. комментарий Павла ниже)

Greeso
источник
2
Не совсем верно - атрибут Name не обязательно должен быть уникальным в форме, поскольку он может связывать переключатели вместе.
Пол
4
Также это может вас удивить, но PHP не единственный серверный язык в мире.
См.
@seesharper - это смешно. Я даже проголосовал за тебя! Ну да, меня это не удивляет :)
Greeso
14

ID-тег - используется CSS, определяет уникальный экземпляр div, span или других элементов. Появляется в модели Javascript DOM, позволяя вам получать к ним доступ с помощью различных вызовов функций.

Тег имени для полей - это уникально для каждой формы - если вы не делаете массив, который вы хотите передать в обработку PHP / на стороне сервера. Вы можете получить к нему доступ через Javascript по имени, но я думаю, что он не отображается как узел в DOM или могут применяться некоторые ограничения (например, вы не можете использовать .innerHTML, если я правильно помню).

Extrakun
источник
9
Для правильного поведения переключатели должны иметь одинаковое имя - оно не уникально для каждой формы.
Nickf
Моя ошибка. Хотя для пояснения, для ввода текста, текстовых областей и т. Д., Теги имен используются для их идентификации. Не обязательно уникальный.
Extrakun
12

Обычно предполагается, что имя всегда заменяется идентификатором . В некоторой степени это верно, но не для полей формы и имен фреймов , если говорить практически. Например, с элементами формы nameатрибут используется для определения пар имя-значение, которые должны быть отправлены в программу на стороне сервера, и его не следует исключать. Browsers do not use id in that manner, Чтобы быть в безопасности, вы можете использовать атрибуты name и id для элементов формы. Итак, мы бы написали следующее:

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

Для обеспечения совместимости хорошей идеей будет наличие соответствующих значений атрибутов name и id, когда оба они определены. Однако будьте осторожны - некоторые теги, особенно переключатели, должны иметь неуникальные значения имен, но требовать уникальных значений идентификаторов. Еще раз, это должно ссылаться на то, что id - это не просто замена имени; они разные по назначению. Кроме того, не стоит сбрасывать со счетов старый стиль, глубокий взгляд на современные библиотеки показывает, что такой стиль синтаксиса иногда используется для повышения производительности и упрощения. Ваша цель всегда должна быть в пользу совместимости.

Теперь в большинстве элементов атрибут name устарел в пользу более вездесущего атрибута id. Однако, в некоторых случаях, в частности , образуют поля ( <button>, <input>, <select>и <textarea>), имя атрибута жизни, потому что по- прежнему требуется , чтобы установить пару имя-значение для представления формы. Кроме того, мы обнаружили, что некоторые элементы, в частности, фреймы и ссылки, могут продолжать использовать атрибут name, поскольку он часто полезен для извлечения этих элементов по имени.

Существует четкое различие между идентификатором и именем. Очень часто, когда имя продолжается, мы можем установить значения одинаковыми. Тем не менее, идентификатор должен быть уникальным, а имя в некоторых случаях не должно, думаю, переключатели. К сожалению, уникальность значений идентификаторов, хотя и улавливается проверкой разметки, не так последовательна, как это должно быть. Реализация CSS в браузерах будет стилизовать объекты, которые имеют значение id; таким образом, мы не можем отлавливать ошибки разметки или стиля, которые могут повлиять на наш JavaScript, до времени выполнения.

Это взято из книги JavaScript- The Complete Reference by Thomas-Powell

Ширгилл Фархан
источник
4
Еще одна причина, по которой вы не можете просто использовать имя, совпадающее с идентификатором: на странице может быть две формы, которые должны представлять одни и те же данные (например, два поля поиска). В этом случае значение nameдолжно быть одинаковым (серверный код не заботится о том, что было отправлено), но оно idдолжно быть другим (поскольку оно должно быть уникальным на всей странице).
IMSoP
10

nameустарело для целей ссылки и недопустимо в HTML5. Он больше не работает, по крайней мере, в последней версии Firefox (v13). Изменить <a name="hello">на<a id="hello">

Цель не должна быть <a>тегом, это может быть <p id="hello"> или <h2 id="hello">т. Д., Который часто является более чистым кодом.

Как ясно говорят другие посты, nameвсе еще используется (необходимо) в формах. Это также все еще используется в тегах META.

user1454923
источник
Вы имеете в виду «имя не рекомендуется для тегов ссылок» вместо «имя не рекомендуется для целей ссылок»? Фактически, целью ссылки может быть iframe. Если вы не укажете атрибут имени для этого iframe, целевой атрибут не будет работать для ссылки. Это поведение сохраняется для всех браузеров и совместимо с HTML5.
yucer
Я здесь пытаюсь выяснить , как сделать ссылку на якорь , как в маркер , где вы идете , чтобы , когда у вас есть URL , который заканчивается в «#something». лучшее, что я могу сказать, в html до 4, это должно быть <a name="something">. В html 4 это <a name="something" id="something"> (соответствует), а в html 5 - <a id="something">, хотя id может быть «глобальным атрибутом» для чего угодно. Что я не могу понять, так это допустимо ли имя в дополнение к идентификатору в <a> в html 5. Хорошо, экспериментируйте с любой настройкой, которая у меня есть ...
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>
Хунтао
источник
6

name Vs id

имя

  • Наименование элемента. Например, используется сервером для идентификации полей в форме отправки.
  • Поддерживающие элементы <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • Имя не должно быть уникальным.

Я бы

  • Часто используется с CSS для стилизации определенного элемента. Значение этого атрибута должно быть уникальным.
  • Идентификатором являются глобальные атрибуты , они могут использоваться для всех элементов, хотя атрибуты могут не влиять на некоторые элементы.
  • Должен быть уникальным во всем документе.
  • Значение этого атрибута не должно содержать пробелов, в отличие от атрибута класса, который допускает разделенные пробелами значения.
  • Использование символов, кроме букв и цифр ASCII, '_', '-' и '.' может вызвать проблемы совместимости, поскольку они не были разрешены в HTML 4. Хотя это ограничение было снято в HTML 5, идентификатор должен начинаться с буквы для совместимости.
Subodh Ghulaxe
источник
Я видел nameатрибуты, используемые в элементах стиля. Я полагаю, это неверно?
Synetech
5

Идентификатор элемента ввода формы не имеет ничего общего с данными, содержащимися в элементе. Идентификаторы предназначены для подключения элемента с помощью JavaScript и CSS. Атрибут name, однако, используется в HTTP-запросе, отправляемом вашим браузером на сервер, в качестве имени переменной, связанной с данными, содержащимися в атрибуте value.

Например:

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

Когда форма отправлена, данные формы будут включены в заголовок HTTP следующим образом:

Если вы добавите атрибут ID, он ничего не изменит в заголовке HTTP. Это просто облегчит работу с CSS и JavaScript.

орбита
источник
2

Если вы не используете собственный метод отправки формы для отправки информации на сервер (а вместо этого делаете это с помощью javascript), вы можете использовать атрибут name, чтобы присоединить дополнительную информацию к входным данным - скорее как связать ее со скрытым входным значением, но выглядит аккуратнее, потому что он включен во входные данные.

Этот бит все еще работает в Firefox, хотя я полагаю, что в будущем он может быть пропущен.

Вы можете иметь несколько полей ввода с одним и тем же значением имени, если только вы не планируете использовать старомодный способ.

Джон Брей
источник
1

На основе личного опыта и в соответствии с описанием школ W3 для атрибутов:

ID является глобальным атрибутом и применяется практически ко всем элементам в HTML. Он используется для уникальной идентификации элементов на веб-странице, и к его значению чаще всего обращаются из внешнего интерфейса (обычно через JavaScript или jQuery).

name - это атрибут, который полезен для определенных элементов (таких как элементы формы и т. д.) в HTML. Его значение в основном отправляется на сервер для обработки.

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

Kojugart
источник
0

Ниже приведено интересное использование атрибута id. Он используется внутри тега и используется для идентификации формы элементов за пределами границ, чтобы они были включены в другие поля формы.

 <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

Идентификатор: 1) Он используется для идентификации элемента HTML через объектную модель документа (через Javascript или в стиле CSS). 2) Идентификатор должен быть уникальным на странице.

Имя соответствует элементу формы и определяет, что отправляется обратно на сервер. Пример :

<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">
Вакас Ахмед
источник
0

Идентификатор используется для уникальной идентификации элемента.

Имя используется в формах. Хотя вы отправляете форму, если вы не даете никакого имени, ничего не будет отправлено. Следовательно, элементам формы нужно имя, которое идентифицируется с помощью методов формы, таких как «получить или нажать».

И те, которые только с атрибутом имени, погаснут.

Viyaan Jhiingade
источник
0

Он idдаст элементу идентификатор, поэтому, как только вы напишите реальный код (например, JavaScript), вы можете использовать идентификатор для чтения элементов. nameЭто просто имя , так что пользователь может видеть имя элемента, я думаю.

Пример:

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

Это полезно? Дайте мне знать, если есть какие-то проблемы.

Dangerousgame
источник
0

Нет буквальной разницы между идентификатором и именем.

name является идентификатором и используется в http-запросе, отправляемом браузером на сервер, в качестве имени переменной, связанной с данными, содержащимися в атрибуте value элемента.

Идентификатор, с другой стороны, является уникальным идентификатором для браузера, клиентской части и JavaScript. Для формы Hence нужен идентификатор, а для его элементов - имя.

id более конкретно используется при добавлении атрибутов к уникальным элементам. В методах DOM Id используется в Javascript для ссылки на конкретный элемент, на котором вы хотите, чтобы ваше действие происходило.

Например:

<html>
<body>

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

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

То же самое может быть достигнуто с помощью атрибута name, но предпочтительно использовать id в форме и name для небольших элементов формы, таких как тег input или тег select.

Адди
источник