Можете ли вы иметь один логический <form> split через несколько <div> s?

В моем существующем макете веб-страницы, который включает несколько файлов, один из которых указывает макет высокого уровня, есть два элемента: один для левого столбца и один для правильного столбца.

Я хочу иметь один логический <form> (с одним действием), где <input> элементы распределяются как по левому столбцу, так и по правому столбцу. Единственный способ сделать это, чтобы элемент был родительским как для <div> (и реорганизовать мой код макета), либо можно сделать что-то вроде <form [something]> внутри обоих div, так что нажатие submit в одной форме отправляет все входы от обеих форм?

Ответы

Ответ 1

Единственный способ отправить обе формы - обернуть оба <div> в один тег <form>. Или вы можете использовать jQuery/JavaScript для агрегирования данных и отправки их вместе в виде одной заявки.

Ответ 2

Я думаю, что люди не задают вопрос. A <form> может содержать любые элементы, которые ему нужны. Если расположение вашей страницы выглядит примерно так:

<body>
    <div id="leftColumn"><input name="foo" type="text"></div>
    <div id="rightColumn"><input name="bar" type="text"></div>
<body>

Вам не нужны отдельные формы foo и bar. Вы можете с радостью заключить обе эти <div> внутри одного элемента <form>:

<body>
    <form name="onlyOneForm">
        <div id="leftColumn"><input name="foo" type="text"></div>
        <div id="rightColumn"><input name="bar" type="text"></div>
    </form>
<body>

Ответ 3

(Извините, что не принял ответа и опубликовал свой собственный, но я только что узнал, что, по-видимому, полученные ответы не соответствуют HTML5!)

HTML5 вводит атрибут form= для элемента <input> [1]. Чтобы вы могли сделать элемент <input form="form1" name="input1" /> and have it in a nested inner form, or even outside of the `.

[1] http://www.w3.org/TR/html5/association-of-controls-and-forms.html#attr-fae-form

Ответ 4

Короткий ответ Нет, у вас не может быть двух отдельных тегов form, действующих как 1 форма, вместо этого оберните все это внутри тега div обертки

<form>
  <!-- some content with input elements has no relation with other form tag on this page, it just ends where you specify the end tag -->
</form>

<form>
  <!-- Has  no relation with the first form -->
</form>