Атрибут `form` тега `<button>`

Описание

Атрибут form позволяет связать кнопку с формой, даже если сама кнопка находится за пределами этой формы. Это особенно полезно для сложных макетов, когда кнопка отправки должна быть расположена отдельно от самой формы.

Пример использования:

<form id="login-form"> <input type="text" placeholder="Логин"> <input type="password" placeholder="Пароль"> </form>  <button type="submit" form="login-form">Войти</button>

Основные характеристики:

Аспект	Поведение	Примечание
Связывание	Соединяет кнопку с формой по ID	Форма должна существовать в DOM
Типы кнопок	Работает с submit, reset и button	Для submit отправляет указанную форму
Доступность	Не влияет на семантику	Рекомендуется визуально связывать кнопку с формой

Практический пример с несколькими формами:

<form id="form1"> <input type="text" name="field1"> </form> <form id="form2"> <input type="text" name="field2"> </form>  <button type="submit" form="form1">Отправить форму 1</button> <button type="reset" form="form2">Очистить форму 2</button>

Важные замечания:

Атрибут должен содержать ID существующей формы
Поддерживается во всех современных браузерах
Не работает с формами в фреймах или других окнах
Для старых браузеров может потребоваться JavaScript-полифил

Пример с динамическим изменением формы:

<form id="dynamic-form-1">...</form> <form id="dynamic-form-2">...</form> <button id="multi-form-btn" type="submit" form="dynamic-form-1"> Отправить </button> <script> // Переключаем привязку кнопки между формами document.getElementById('multi-form-btn').form = 'dynamic-form-2'; </script>

Примечание: Хотя атрибут form предоставляет гибкость в расположении элементов, старайтесь сохранять логическую группировку формы и её кнопок для лучшей понятности кода.

Совместимость с ARIA:

<form id="aria-form" aria-labelledby="form-title"> <h2 id="form-title">Регистрация</h2> ... </form> <button form="aria-form" type="submit" aria-describedby="form-title"> Зарегистрироваться </button>

Атрибут form тега <button>