Ответ
Кнопка (<button>) может быть связана с другим элементом через атрибут form, указывающий на id формы, или через formaction, formenctype и другие атрибуты, управляющие поведением формы. Также можно использовать aria-labelledby или aria-controls для доступности.
Пример:
<button form="myForm" type="submit">Отправить</button>
<form id="myForm" action="/submit">...</form>Здесь кнопка вне формы, но отправляет её благодаря form="myForm".
Другой пример (ARIA):
<button aria-controls="dropdown">Меню</button>
<div id="dropdown">Содержимое меню</div>Атрибут aria-controls связывает кнопку с управляемым элементом.
Ответ 18+ 🔞
А, ну это ж классика, блядь! Кнопка, которая торчит где-то в стороне, а форма — вообще в другом месте. Как будто голова отъехала от тела и пытается им управлять, ёпта!
Смотри, вот тебе магия: пишешь кнопке form="myForm", и она уже знает, какую именно форму ей надо еб... то есть, отправить. Всё равно что крикнуть через двор: «Эй, форма с id myForm, готовься, я сейчас в тебя данные впихну!»
<button form="myForm" type="submit">Отправить</button>
<form id="myForm" action="/submit">...</form>Вот и всё, блядь! Кнопка может хоть на Луне быть, а форма — в подвале. Главное, чтобы id совпал, а то получится, как в том анекдоте: «Ты не туда жмёшь, чувак!»
А ещё есть вот эта штука для доступности — aria-controls. Это когда кнопка типа управляет каким-то блоком, например, выпадашкой. Типа говорит: «Вот этот вот div с id dropdown — это моя вотчина, я его открываю и закрываю, как шкаф с секретами».
<button aria-controls="dropdown">Меню</button>
<div id="dropdown">Содержимое меню</div>По сути, ты просто наводишь мосты между элементами, чтобы и браузер, и скринридеры не тупили, а понимали, кто с кем связан. Без этого — пидарасы налетели, всё поломают, пользователь вообще не поймёт, что к чему.
Короче, связывай, не ленись. А то будет как у того Герасима — хотел как лучше, а получилось «Му-му» в озеро, пиздец.