HTML4 и XHTML настаивали на том, чтобы все элементы формы, включая кнопку отправки, содержались в одном блоке <form>…</form> Хотя это редко является проблемой, это может привести к проблемам проектирования, и я, конечно, помню, как боролись с ранними версиями ASP.NET, в которых на каждой странице использовалась одна форма. В общем, если вам требуется поле ввода вне формы, вам потребуется JavaScript, чтобы импортировать его значение при отправке формы.
Одной из менее известных функций HTML5 является атрибут form Он позволяет вам ссылаться на конкретную form
<form id="myform1" method="post">
<label for="name">name:</label>
<input type="text" name="name" />
<label for="email">email:</label>
<input type="email" name="email" /></form>
<input type="number" form="myform1" name="age" />
<button form="myform1" type="submit">Submit</button>
Интересно, что атрибут form В качестве альтернативы вы можете изменить атрибуты form
<script type="text/javascript">// <![CDATA[
// grab fieldx from another form
document.getElementById("myform1").addEventListener("submit", function(e) {
document.getElementById("fieldx").setAttribute("form", e.target.id);
return true;
}, false);
// ]]></script>
Поддержка браузера
Атрибут form Только по этой причине, вероятно, не стоит использовать, если ваши осиротевшие поля относительно не важны, и вы счастливы потерять данные.
Но чувствует ли это правильно? Возможно, это потому, что я много лет писал автономные формы, но я бы не советовал использовать атрибут form В лучшем случае это немного не элегантно. В худшем случае вы и ваши коллеги запутаетесь, когда вы изучите код через несколько месяцев. Но отрадно знать, что оно вам нужно