Можно ли задавать в инпутах одинакые имена для id и name в разных формах?

Question

[Максим Иванов]

Можно ли задавать одинаковые значение id и name в разных форма?
Так же обязателен ли id в инпутах в моём случае?
Пример:

<form class="form-1">
            <input type="text" name="name" id="name" class="footer__form-input" required>
            <label for="name" class="footer__form-label">Full Name</label>

            <input type="email" name="email" id="email" class="footer__form-input" required>
            <label for="email" class="footer__form-label">E-mail</label>
        </form>

<form class="form-2">
            <input type="text" name="name" id="name" class="footer__form-input" required>
            <label for="name" class="footer__form-label">Full Name</label>

            <input type="email" name="email" id="email" class="footer__form-input" required>
            <label for="email" class="footer__form-label">E-mail</label>
        </form>

Может ли это как-то повлиять на передачу данных при отправке или ещё как-то?

Comments

[Ankhena]

Можно ли задавать одинаковые значение id и name в разных форма?

В рамках одной страницы, нет нельзя.

Может ли это как-то повлиять

Может. Лейбл из второй формы перенесет пользователя к инпуту в первой.

https://developer.mozilla.org/ru/docs/Learn/Forms/...

Answer 1

[Степан Крапивин]

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

Comments

[Максим Иванов]

Что может быть если использовать одинаковый id, но только в такой ситуации с формами?

[Степан Крапивин]

Максим Иванов, например могут некорректно работать скрипты, которые ищут элемент по id и что-то с ним делают. Потому что подразумевается что все id уникальные

[Максим Иванов]

Степан Крапивин, а если скриптов нет которые ищут по id? Если я использовал id чисто для связывание label и input и не более? Тогда всё ок можно сказать?

[Степан Крапивин]

Максим Иванов, в теории не должно ничего сломаться при отправке формы. Но так делать плохо. И лучше сразу учиться не создавать одинаковые id на странице.

Есть несколько вариантов как это исправить:

* положить инпут внутрь лейбла - тогда не надо будет связывать лейбл через id
* добавить префикс для id

<form id="form-1">
  <input id="form-1-name" ...>
</form>

<form id="form-2">
  <input id="form-2-name" ...>
</form>

[Ankhena]

Степан Крапивин,

положить инпут внутрь лейбла - тогда не надо будет связывать лейбл через id

MDN рекомендует продолжать связывать их по id-for, даже если внутри.

[godsplane]

Ankhena, не нашел

[Ankhena]

godsplane,

Однако даже в таких случаях лучше всё равно указывать атрибут for, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.