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