Чи можете ви вкладати HTML-форми?

Чи можливо вкладати такі форми html

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

щоб обидві форми працювали? У мого друга є проблеми з цим, частина subFormробіт, а інша частина - ні.

Одним словом, ні. Ви можете мати кілька форм на сторінці, але вони не повинні вкладатись.

З робочого проекту html5 :

4.10.3 formЕлемент

Модель вмісту:

Зміст потоку, але без нащадків елемента форми.

Я зіткнувся з подібною проблемою, і я знаю, що це не відповідь на питання, але це може допомогти комусь із таким видом проблеми:
якщо є необхідність помістити елементи двох або більше форм у задану послідовність , атрибут 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" />

Тут ви знайдете сумісність браузера.

Друга форма буде проігнорована, див. Фрагмент, наприклад, від 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;
}

Простий 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();

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

У кутових формах можна вкладати. Це означає, що зовнішня форма діє, коли всі дочірні форми також дійсні. Однак браузери не дозволяють вкладати <form>елементи, тому Angular надає ngFormдирективу, яка поводиться однаково, <form>але може бути вкладена. Це дозволяє мати вкладені форми, що дуже корисно при використанні директив кутової перевірки у формах, що динамічно генеруються за допомогою ngRepeatдирективи. ( джерело )

Оскільки це 2019 рік, я хотів би дати оновлену відповідь на це питання. Можна досягти такого ж результату, як і вкладені форми, але не вкладаючи їх. HTML5 представив атрибут форми. Ви можете додати атрибут форми до елементів керування форми поза формою, щоб зв’язати їх із певним елементом форми (за id).

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-так-стоп-використання-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:

Ця функція дозволяє авторам подолати відсутність підтримки вкладених елементів форми.

Ще один спосіб подолати цю проблему, якщо ви використовуєте якусь скриптову мову на стороні сервера, яка дозволяє вам маніпулювати розміщеними даними, - це оголосити форму 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 є лише ваші дані "основної форми", а ваші дані підформи зберігаються в іншій змінній, якою ви можете керувати за бажанням.

Сподіваюся, це допомагає!

Як сказав Крейг, ні.

Щодо вашого коментаря, чому :

Можливо, буде простіше використовувати 1 <form>з входами та кнопкою "Оновити", а скопіювати приховані входи за допомогою кнопки "Надіслати замовлення" в іншій <form>.

Зауважте, вам заборонено вкладати елементи ФОРМИ!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (специфікація html4 відмічає жодних змін щодо форм гніздування від 3,2 до 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.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 :)

Простий спосіб вирішити - використовувати iframe для утримання "вкладеної" форми. Візуально форма вкладена, але на стороні коду її взагалі в окремому HTML-файлі.

Ви також можете використовувати formaction = "" всередині тегу кнопок.

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

Це було б вкладено в оригінальній формі як окрема кнопка.

Навіть якщо ви могли змусити його працювати в одному браузері, немає гарантії, що він буде працювати однаково у всіх браузерах. Тож, хоча, можливо, ви зможете змусити його працювати деякий час, ви, звичайно, не зможете змусити його працювати весь час.

У вас навіть будуть проблеми з тим, щоб він працював у різних версіях одного браузера. Тому уникайте використання цього.

Хоча я не представляю рішення для вкладених форм (це не працює надійно), я представляю рішення, яке працює для мене:

Сценарій використання: Суперформа, що дозволяє змінювати N елементів одночасно. У нижній частині кнопки "Надіслати всі". Кожен елемент хоче мати власну вкладену форму за допомогою кнопки "Надіслати елемент № N". Але не можу ...

В цьому випадку можна реально використовувати одну форму, а потім ім'я бути кнопки submit_1.. submit_Nі submitAllі обробляти його сервери на стороні, лише дивлячись на Params , що закінчуються в _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>

Гаразд, не так багато винаходи, але це робить свою роботу.

Про форми гніздування: один день я провів 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, я знову взявся за справу. Це відповідає на питання, чому можна гніздо формувати. Я маю на увазі, справді, для чого ідентифікатор, якщо не визначити, яку форму слід використовувати? Повинна бути краща, стрункіша робота.

Використовуйте порожній тег форми перед вкладеною формою

Тестували та працювали на Firefox, Chrome

Не перевірено на IE

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

Хоча питання досить старе, і я погоджуюся з @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 LINK

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

Ні, ви не можете мати вкладену форму. Натомість ви можете відкрити Модал, який містить форму, та виконати надсилання 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
      }
  }
});

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

<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);
    }

Я вірю, що це допоможе.

До того, як я зрозумів, що не повинен цього робити, я вклав форми для створення декількох кнопок подання. Таким чином пройшло протягом 18 місяців, тисячі транзакцій підписки, ніхто не закликав нас про якісь труднощі.

Вкладені форми дали мені ідентифікатор для розбору для правильної дії. Не зламався, поки я спробував приєднати поле до однієї з кнопок і Validate поскаржився. Розв’язати це було не багато - я використав явну строкову редакцію на зовнішній формі, щоб вона не мала значення для подання та форма не збігалася. Так, так, я мав би перенести кнопки від подання до onclick.

Справа в тому, що є обставини, коли це не зовсім порушено. Але "не зовсім зламаний", мабуть, занадто низький стандарт для зйомки для :-)