Иногда в дизайне по той или иной причине формы сделаны так, что сверстать всё внутри одного тега form не получается. Например, кнопка отправки формы почему-то в модальном окне. Или какой-то из инпутов оторван от других, потому что это галочка согласия с правилами сервиса. Или сложная форма поиска, где визуально как будто форма в форме.
Но при этом хочется сделать семантично. В том числе для того, чтобы сработал фолбек, ведь если JS отвалится, то хотя бы атрибут method у формы поможет отправить данные на сервер. Как быть?
В статье Александр Музенхардт напоминает про атрибут form, который отлично работает на многих элементах формы. Туда достаточно написать id самой формы, а браузер сам свяжет инпут и форму, даже если форма не является родителем инпута. Очень удобно. Причём атрибут настолько древний, что работает буквально почти везде.
<form action="/login" method="get" id="form-login"></form>
<button type="reset" form="form-login">Reset</button>
Конечно, лучше всё же убедить дизайнера не разносить одну форму по странице так, чтобы верстать было сложнее. Потому что в таком случае ещё и доступность ломается. Но если уговорить не получается, вот решение.
Кстати, на сайте htmhell.dev сейчас каждый день выходит по одной статье про хорошие и плохие практики HTML, адвент-календарь. Рекомендую.
https://www.htmhell.dev/adventcalendar/2023/3/
