Можете ли вы вложить HTML формы?

Question

Возможно ли вложить html формы, подобные этой

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

чтобы обе формы работали? У моего друга проблемы с этим, часть subForm работает, а другая - нет.

Answer 1

Одним словом, нет. На странице может быть несколько форм, но они не должны быть вложенными.

Из html5 рабочего проекта :

4.10.3 Элемент form

Модель содержимого:

Содержимое потока, но без потомков элементов формы.

Answer 2

Вторая форма будет игнорироваться, см. Фрагмент из WebKit, например:

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

Answer 3

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

От http://www.w3schools.com/tags/att_input_form.asp:

1. Атрибут формы является новым в HTML5.
2. Указывает, какому элементу <form> принадлежит элемент <input>. Значением этого атрибута должен быть атрибут id элемента <form> в том же документе.

Сценарий :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Осуществление

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

Здесь вы найдете совместимость браузера.

Answer 4

Простой HTML не может позволить вам сделать это. Но с помощью JavaScript вы можете сделать это. Если вы используете javascript / jquery, вы можете классифицировать элементы формы с помощью класса и затем использовать serialize () для сериализации только тех элементов формы для подмножества элементов, которые вы хотите отправить.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

Тогда в вашем javascript вы можете сделать это для сериализации элементов class1

$(".class1").serialize();

Для класса 2 вы можете сделать

$(".class2").serialize();

Для всей формы

$("#formid").serialize();

или просто

$("#formid").submit();

Answer 5

Если вы используете AngularJS, любые теги <form> внутри вашего ng-app заменяются во время выполнения директивами ngForm, предназначенными для вложения.

В угловых формах могут быть вложенными. Это означает, что внешняя форма действительна, когда все дочерние формы также действительны. Однако браузеры не допускают вложение элементов <form>, поэтому Angular предоставляет директиву ngForm, которая ведет себя идентично <form>, но может быть вложенной. Это позволяет вам иметь вложенные формы, что очень полезно при использовании директив проверки Angular в формах, которые динамически генерируются с использованием директивы ngRepeat. ( источник )

Answer 6

Как сказал Крейг, нет.

Но, относительно вашего комментария относительно , почему :

Может быть проще использовать 1 <form> со входами и кнопкой «Обновить», а также использовать копирование скрытых входов с кнопкой «Отправить заказ» в другой <form>.

Answer 7

Еще один способ обойти эту проблему, если вы используете какой-либо серверный язык сценариев, который позволяет вам манипулировать опубликованными данными, это объявить вашу HTML-форму следующим образом:

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

Если вы напечатаете опубликованные данные (я буду использовать PHP здесь), вы получите массив, подобный этому:

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

Тогда вы можете просто сделать что-то вроде:

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

Ваш $ _POST теперь содержит только ваши данные "главной формы", а ваши данные подчиненной формы хранятся в другой переменной, которой вы можете манипулировать по своему желанию.

Надеюсь, это поможет!

Answer 8

Обратите внимание, что вам не разрешено вложить элементы FORM!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (спецификация html4 не содержит изменений в отношении вложенных форм с 3,2 до 4)

https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (спецификация html4 не отмечает никаких изменений, касающихся вложенности форм с 4.0 до 4.1)

https://www.w3.org/TR/html5-diff/ (спецификация html5 не содержит изменений в отношении вложенных форм с 4 до 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms комментирует «Эта функция позволяет авторам обойти отсутствие поддержки вложенных элементов формы.», Но не указывает, где это указано, я думаю, они предполагают, что мы должны предполагать, что указано в спецификации html3:)

Answer 9

Поскольку сейчас 2019, я бы хотел дать обновленный ответ на этот вопрос. Можно достичь того же результата, что и вложенные формы, но без их вложения. HTML5 ввел атрибут формы. Вы можете добавить атрибут формы для элементов управления формы вне формы, чтобы связать их с определенным элементом формы (по идентификатору).

https://www.impressivewebs.com/html5-form-attribute/

Таким образом, вы можете структурировать свой HTML следующим образом:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

Атрибут формы поддерживается всеми современными браузерами. IE не поддерживает это, хотя IE уже не браузер, а скорее инструмент совместимости, что подтверждается самой Microsoft: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/. Пора перестать заботиться о том, чтобы все работало в IE.

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

Из спецификации html:

Эта функция позволяет авторам обойти отсутствие поддержки вложенные элементы формы.

Answer 10

Простой обходной путь - использовать iframe для хранения «вложенной» формы. Визуально форма вложенная, но на стороне кода она в отдельном html-файле.