Можете ли вы вкладывать html-формы?

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

Из html5 рабочий черновик:

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

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

Но, что касается вашего комментария к Зачем:

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

Даже если бы вы могли заставить его работать в одном браузере, нет гарантии, что он будет работать одинаково во всех браузерах. Таким образом, хотя вы могли бы заставить его работать некоторый времени, вы определенно не сможете заставить его работать все времени.

Вторая форма будет проигнорирована, см., Например, фрагмент из 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;
}

Note you are not allowed to nest FORM elements!

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 :)

О формах вложенности: однажды днем ​​я провел 10 лет, пытаясь отладить сценарий ajax.

мой предыдущий ответ / пример не учитывал разметку html, извините.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

form_2 постоянно терпит неудачу, говоря неверная форма_2.

Когда я переместил ajaxContainer, который произвел form_2 <i>outside</i> из form_1, я вернулся к работе. Это ответ на вопрос, почему можно вкладывать формы. Я имею в виду, действительно, для чего нужен идентификатор, если не определять, какую форму использовать? Должен быть способ получше и лучше.

Обычный 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();

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

Сегодня я тоже застрял в той же проблеме и решил проблему, добавив пользовательский элемент управления и
. на этом элементе управления я использую этот код

<div class = "divformTagEx">

</div>

<asp:Literal runat = "server" ID = "litFormTag" Visible = "false">
'<div> <form  style = "margin-bottom: 3;" action = "http://login.php" method = "post" name = "testformtag"></form> </div>'</asp:Literal>

и в событии PreRenderComplete страницы вызовите этот метод

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

Я верю, что это поможет.

Другой способ обойти эту проблему, если вы используете какой-либо язык сценариев на стороне сервера, который позволяет вам манипулировать опубликованными данными, - это объявить вашу 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 теперь есть только данные вашей «основной формы», а данные подчиненной формы хранятся в другой переменной, которой вы можете манипулировать по своему желанию.

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

Хотя вопрос довольно старый, и я согласен с @everyone, что вложение формы в HTML запрещено.

Но это то, что все могут захотеть это увидеть

где вы можете взломать (я называю это взломом, поскольку я уверен, что это не законно) html, чтобы браузер мог иметь вложенную форму

<form id = "form_one" action = "http://apple.com">
  <div>
    <div>
        <form id = "form_two" action = "/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id = "form_three" action = "http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id = "form_four" action = "http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

ССЫЛКА НА JS FIDDLE

http://jsfiddle.net/nzkEw/10/

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

In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of <form> elements, so Angular provides the ngForm directive which behaves identically to <form> but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeat directive. (source)

Я столкнулся с аналогичной проблемой, и я знаю, что это не ответ на вопрос, но это может помочь кому-то с такой проблемой:
если есть необходимость поместить элементы двух или более форм в заданную последовательность, атрибут HTML5<input> form может быть решением. От http://www.w3schools.com/tags/att_input_form.asp:

1. The form attribute is new in HTML5.
2. Specifies which <form> element an <input> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.

Сценарий:

• 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" />

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

Используйте пустой тег формы перед вложенной формой

Протестировано и работает в Firefox, Chrome

Не тестировалось на I.E.

<form name = "mainForm" action = "mainAction">
  <form></form>
  <form name = "subForm"  action = "subAction">
  </form>
</form>

РЕДАКТИРОВАТЬ @adusza: как отметили комментаторы, приведенный выше код не приводит к вложенным формам. Однако, если вы добавите элементы div, как показано ниже, у вас будет subForm внутри mainForm, а первая пустая форма будет удалена.

<form name = "mainForm" action = "mainAction">
  <div>
      <form></form>
      <form name = "subForm"  action = "subAction">
      </form>
  </div>
</form>

Хотя я не предлагаю решения для вложенных форм (оно работает ненадежно), я предлагаю обходной путь, который работает для меня:

Сценарий использования: Суперформа, позволяющая изменять N элементов одновременно. Внизу есть кнопка «Отправить все». Каждый элемент хочет иметь свою собственную вложенную форму с кнопкой «Отправить элемент № N». Но не могу ...

В этом случае можно фактически использовать одну форму, а затем присвоить кнопкам имена submit_1..submit_N и submitAll и обрабатывать их на стороне сервера, просматривая только параметры, оканчивающиеся на _1, если имя кнопки было submit_1. .

<form>
    <div id = "item1">
        <input type = "text" name = "foo_1" value = "23">
        <input type = "submit" name = "submit_1" value = "Submit Item #1">
    </div>
    <div id = "item2">
        <input type = "text" name = "foo_2" value = "33">
        <input type = "submit" name = "submit_2" value = "Submit Item #2">
    </div>
    <input type = "submit" name = "submitAll" value = "Submit All Items">
</form>

Ладно, не особо изобретение, но свое дело оно выполняет.

Вы также можете использовать formaction = "" внутри тега кнопки.

<button type = "submit" formaction = "/rmDog" method='post' id = "rmDog">-</button>

Это будет вложено в исходную форму как отдельная кнопка.

Прежде чем я узнал, что я не должен этого делать, у меня были вложенные формы с целью иметь несколько кнопок отправки. Так бегало 18 месяцев, тысячи транзакций по подписке, никто не звонил нам ни о каких трудностях.

Вложенные формы дали мне идентификатор, который нужно проанализировать, чтобы предпринять правильное действие. Не сломалось, пока я не попытался прикрепить поле к одной из кнопок, и Validate не пожаловался. Распутать это было несложно - я использовал явное преобразование в строку во внешней форме, поэтому не имело значения, что отправка и форма не совпадают. Да, да, надо было перенести кнопки из отправки в onclick.

Дело в том, что есть обстоятельства, при которых он не полностью сломан. Но «не полностью сломан», пожалуй, слишком низкий стандарт, чтобы стремиться к нему :-)

Нет, у вас не может быть вложенной формы. Вместо этого вы можете открыть модальное окно, содержащее форму, и выполнить отправку формы Ajax.

На самом деле невозможно ... Я не мог вложить теги формы ... Однако я использовал этот код:

<form>
    OTHER FORM STUFF

    <div novalidate role = "form" method = "post" id = "fake_form_id_0" data-url = "YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

с {% csrf_token %} и прочее

и применил JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

Поскольку сейчас 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:

This feature allows authors to work around the lack of support for nested form elements.