Спецификации W3C определяют, что вход может быть связан только с одной формой.Это признак плохого дизайна, когда вам нужно иметь несколько форм, а бэкэнд должен знать, какие данные присутствуют в других формах.
Элемент <form>
может содержать произвольные структуры элементов, такие как таблицы, он может дажесодержать все содержимое тела документа.Вам вряд ли понадобится несколько форм.
Обычный вариант использования - использовать несколько кнопок отправки с одинаковым именем.Только нажатые кнопки будут частью данных формы.
<form method="post">
<input type="text" name="text_input">
<button type="submit" name="action" value="add">submit</button>
<button type="submit" name="action" value="update">submit</button>
<button type="submit" name="action" value="delete">submit</button>
</form>
Опять же, не делайте этого, однако, если вы действительно хотите по какой-то причине разделить поле между несколькими формами, это можно сделать только путем перехвата JavaScript, отправляющего форму.событие.Это не будет работать, когда скрипты отключены пользователем.
document.querySelectorAll('form').forEach(e => {
e.addEventListener('submit', function() {
document.querySelectorAll('.multi-form-input').forEach(e => e.setAttribute('form', this.id));
})
})
<input class="multi-form-input" name="common_input" type="text">
<form id="form-1" method="post">
<button type="submit" name="action" value="1">submit</button>
</form>
<form id="form-2" method="post">
<button type="submit" name="action" value="2">submit</button>
</form>