Подтвердить что ты не робот

Ввод HTML - имя против id

При использовании тега HTML <input> в чем разница между использованием атрибутов name и id, особенно, что я обнаружил, что их иногда называют одинаковыми?

4b9b3361

ОТВЕТЫ

Ответ 1

В HTML4.01:

Имя Атрибут

  • Действует только на <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea>
  • Имя не обязательно должно быть уникальным и может использоваться для группировки элементов вместе, таких как переключатели и флажки.
  • Нельзя ссылаться на URL-адрес, хотя, поскольку JavaScript и PHP могут видеть URL-адрес, существуют обходные пути
  • Указывается в JS с помощью getElementsByName()
  • Показывает те же пространства имен, что и атрибут id
  • Начните с буквы
  • Согласно спецификациям чувствителен к регистру, но большинство современных браузеров, похоже, не следуют этому.
  • Используется для элементов формы для отправки информации. Только теги ввода с атрибутом name отправляются на сервер

Идентификатор Атрибут

  • Действителен для любого элемента, кроме <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>
  • Каждый идентификатор должен быть уникальным на странице, отображаемой в браузере, который может быть или не быть в одном файле
  • Может использоваться как ссылка привязки в URL
  • Указывается в CSS или URL с знаком #
  • Указывается в JS с getElementById(), а jQuery - $(#<id>)
  • разделяет пространство имен с именем name
  • Должен содержать хотя бы один символ
  • Начните с буквы
  • Не должно содержать ничего, кроме букв, цифр, символов подчеркивания (_), тире (-), двоеточия (:) или периоды (.)
  • Нечувствителен к регистру

В (X) HTML5 все одно и то же, за исключением:

Имя Атрибут

  • Недействительно на <form> больше
  • XHTML говорит, что он должен быть в нижнем регистре, но большинство браузеров не следует за этим

Идентификатор Атрибут

  • Действителен для любого элемента
  • XHTML говорит, что он должен быть в нижнем регистре, но большинство браузеров не следует за этим

Этот вопрос был написан, когда HTML4.01 был нормой, и многие браузеры и функции отличались от сегодняшнего дня.

Ответ 2

атрибут имени используется для публикации, например. веб-сервер. Идентификатор используется в основном для css (и javascript). Предположим, что у вас есть эта настройка:

<input id="message_id" name="message_name" type="text" />

чтобы получить значение с PHP при отправке формы, он будет использовать атрибут name, например:

$_POST["message_name"];

Идентификатор используется для стилизации, как говорилось ранее, для тех случаев, когда вы хотите использовать определенные css.

#message_id
{
    background-color: #cccccc;
}

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

Кроме того, имя может использоваться для большего количества элементов, например, когда вы используете радиокнопки. Затем имя используется для группировки ваших радиокнопков, поэтому вы можете выбрать только один из этих параметров.

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

И в этом конкретном случае я могу сказать, как используется идентификатор, потому что вам, вероятно, понадобится ярлык с вашим радиобарабаном. Ярлык имеет атрибут for-attribute, который использует идентификатор вашего ввода, чтобы связать эту метку с вашим вводом (когда вы нажимаете метку, кнопка отмечена). Пример можно найти ниже

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

И я думаю об этом.

Ответ 3

Идентификаторы должны быть уникальными

... внутри дерева элементов DOM, поэтому каждый элемент управления индивидуально доступен по id на стороне клиента (на странице браузера) на

  • Скрипты Javascript, загруженные на страницу
  • CSS-стили, определенные на странице

Наличие уникальных идентификаторов на вашей странице будет по-прежнему отображать вашу страницу, но это, безусловно, будет неверным. Браузеры очень прощают при анализе недействительного HTML. но не делайте этого только потому, что кажется, что он работает.

Имена довольно часто уникальны, но могут использоваться совместно

... внутри страницы DOM между несколькими элементами управления одного типа (подумайте о переключателях), поэтому, когда данные получают POSTed на сервер, отправляется только определенное значение. Поэтому, когда у вас есть несколько переключателей на вашей странице, только выбранный value отправляется обратно на сервер, даже если имеется несколько связанных переключателей с тем же name.

Добавление к отправке данных на сервер. Когда данные отправляются на сервер (обычно с помощью запроса HTTP POST), все данные отправляются в виде пар имя-значение, где имя является name входного элемента управления HTML, а значение является его value, введенным/выбранным пользователем. Это всегда верно для запросов, отличных от Ajax. В Ajax запросы пары имя-значение могут быть независимы от элементов управления HTML на странице, потому что разработчики могут отправлять все, что захотят на сервер. Довольно часто значения также считываются из элементов управления вводом, но я просто хочу сказать, что это не обязательно так.

Когда имена могут быть дублированы

Иногда бывает полезно, чтобы имена были разделены между элементами управления любого типа ввода формы. Но когда? Вы не указали, что может быть на вашей серверной платформе, но если вы использовали что-то вроде Asp.net MVC, вы получаете преимущество автоматической проверки данных (клиент и сервер), а также привязываете отправленные данные к сильным типам. Это означает, что эти имена должны соответствовать именам свойств типа.

Теперь предположим, что у вас есть такой сценарий:

  • у вас есть представление со списком элементов того же типа
  • Пользователь обычно работает с одним элементом за раз, поэтому они будут вводить данные только одним элементом и отправлять его на сервер

Итак, ваша модель просмотра (поскольку она отображает список) имеет тип IEnumerable<SomeType>, но ваша сторона сервера принимает только один элемент типа SomeType.

Как насчет совместного использования имен?

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

Этот конкретный сценарий можно увидеть на мини-сайте Creative stories. Вы не будете понимать язык, но вы можете проверить эти множественные формы и общие имена. Неважно, что id также дублируются (что является нарушением правила), но это можно решить. В этом случае это не имеет значения.

Ответ 4

  • name идентифицирует поля формы *; поэтому они могут совместно использоваться элементами управления, которые могут представлять несколько возможных значений для такого поля (переключатели, флажки). Они будут представлены как ключи для значений формы.
  • id идентифицирует элементы DOM; поэтому они могут быть нацелены на CSS или Javascript.

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

Ответ 5

name - это имя, которое используется при передаче значения (в URL-адресе или в опубликованных данных). id используется для однозначной идентификации элемента для стилизации CSS и JavaScript.

id может использоваться как якорь. В старые времена для этого использовался <a name, но вы также должны использовать id для якорей. name - это только данные формы сообщения.

Ответ 6

имя используется для отправки формы в DOM (Document Object Model).

ID используется для уникального имени элементов управления html в DOM специально для Javascript и CSS

Ответ 7

Название определяет, каким будет имя атрибута, как только будет отправлена ​​форма. Поэтому, если вы захотите прочитать этот атрибут позже, вы найдете его под "именем" в POST или GET Request.

В то время как идентификатор используется для адресации поля или элемента в javascript или css.

Ответ 8

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

Имя используется в представлении формы. Когда вы отправляете форму, будут отправлены только поля с именем.

Ответ 9

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

Например:

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

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

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

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

Ответ 10

Атрибут name на входе используется его родительским HTML <form>, чтобы включить этот элемент в член HTTP-формы в запрос POST или строку запроса в запросе GET.

id должен быть уникальным, так как он должен использоваться JavaScript для выбора элемента в DOM для манипуляции и использования в селекторах CSS.

Ответ 11

Надеюсь, вы можете найти следующий краткий пример:

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

В коде обратите внимание, что оба атрибута "имя" одинаковы для определения опциональности между "мужским" или "женским", но "идентификатор" не равен их дифференциации.

Ответ 12

Добавление некоторых фактических ссылок на документы W3, которые авторитетно объясняют роль атрибута name для элементов формы. (Для чего я пришел сюда, исследуя, как Stripe.js работает для обеспечения безопасного взаимодействия с шлюзом платежных шлюзов. В частности, что заставляет элемент ввода формы возвращаться на сервер или препятствует его отправке? )

Следующие документы W3 являются релевантными:

HTML 4: https://www.w3.org/TR/html401/interact/forms.html#control-name Раздел 17.2 Элементы управления

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission-0 и https://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set Раздел 4.10.22.4 Построение набора данных формы.

Как объяснено в нем, элемент ввода будет отправлен браузером тогда и только тогда, когда он имеет действительный атрибут name.

Как отмечали другие, атрибут "id" однозначно идентифицирует элементы DOM, но не участвует в представлении нормальной формы. (Хотя "id" или другие атрибуты могут, конечно, использоваться javascript для получения значений формы, которые javascript затем может использовать для представлений AJAX и т.д.)

Одна странность в отношении предыдущих ответов/комментаторов касается значений id и значений имен, находящихся в одном и том же пространстве имен. Насколько я могу судить по спецификациям, это применимо к некоторым устаревшим использованиям атрибута name (не для элементов формы). Например https://www.w3.org/TR/html5/obsolete.html:

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

Ясно, что в этом специальном случае существует некоторое совпадение между значениями id и name для тегов 'a'. Но это, по-видимому, является особенностью обработки идентификаторов фрагментов не из-за общего совместного использования пространства имен идентификаторов и имен.

Ответ 13

Интересный случай использования одного и того же имени: input элементы типа checkbox следующим образом:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

По крайней мере, если ответ обрабатывается PHP, если вы проверите оба поля, ваши данные POST покажут:

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

Я не знаю, будет ли такая конструкция массива происходить с другими серверными языками или если значение атрибута name обрабатывается только как строка символов, и это случайный синтаксис PHP, который массив, основанный на 0, строится на основе порядка данных в ответе POST, который просто:

myfruit[]       apple
myfruit[]       orange

Невозможно сделать трюк с идентификаторами. Несколько ответов в Что такое допустимые значения для атрибута id в HTML?, указывают на спецификацию для HTML 4 (хотя они не приводят цитаты):

Идентификаторы ID и NAME должны начинаться с буквы ([A-Za-z]) и могут быть за которым следует любое количество букв, цифр ([0-9]), дефис ( "-" ), подчеркивания ( "_" ), двоеточия ( ":" ) и периоды ( "." ).

Значит, символы [ и ] недействительны ни в ids, ни в именах в HTML4 (они были бы в порядке в HTML5). Но, как и в случае с очень многими вещами html, только потому, что он недействителен, это не значит, что он не будет работать или не очень полезен.

Ответ 14

Если вы используете javascript/css, вы должны использовать 'id' элемента управления для применения каких-либо файлов CSS/javascript.

Если вы используете имя CSS, вы не будете работать для этого элемента управления. В качестве примера, если вы используете календарь Javascript, прикрепленный к текстовому полю, вы должны использовать идентификатор текстового элемента управления, чтобы назначить ему календарь javascript.