¿Puedes anidar formularios html?

¿Es posible anidar formas html como esta?

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

para que ambas formas funcionen? Mi amigo está teniendo problemas con esto, una parte de las subFormobras, mientras que otra parte no.

En una palabra, no. Puede tener varios formularios en una página, pero no deben estar anidados.

Del borrador de trabajo html5 :

4.10.3 El formelemento

Modelo de contenido:

Contenido de flujo, pero sin descendientes de elementos de forma.

Me encontré con un problema similar, y sé que no es una respuesta a la pregunta, pero puede ser de ayuda para alguien con este tipo de problema:
si es necesario poner los elementos de dos o más formas en una secuencia dada , el atributo HTML5 <input> form puede ser la solución.

De http://www.w3schools.com/tags/att_input_form.asp :

1. El atributo del formulario es nuevo en HTML5.
2. Especifica a qué <form>elemento <input>pertenece un elemento. El valor de este atributo debe ser el atributo id de un <form>elemento en el mismo documento.

Escenario :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

implementación :

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

Aquí encontrarás la compatibilidad del navegador.

El segundo formulario será ignorado, vea el fragmento de WebKit, por ejemplo:

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

El HTML simple no puede permitirte hacer esto. Pero con javascript puedes hacer eso. Si está utilizando javascript / jquery, podría clasificar sus elementos de formulario con una clase y luego usar serialize () para serializar solo esos elementos de formulario para el subconjunto de los elementos que desea enviar.

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

Luego, en su javascript, podría hacer esto para serializar elementos de clase 1

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

Para la clase 2 podrías hacer

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

Para toda la forma

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

o simplemente

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

Si está usando AngularJS, cualquier <form>etiqueta dentro de usted ng-appse reemplaza en tiempo de ejecución con ngFormdirectivas que están diseñadas para anidarse.

En formas angulares se pueden anidar. Esto significa que el formulario externo es válido cuando todos los formularios secundarios también son válidos. Sin embargo, los navegadores no permiten anidar <form>elementos, por lo que Angular proporciona la ngFormdirectiva que se comporta de manera idéntica <form>pero puede anidarse. Esto le permite tener formas anidadas, lo cual es muy útil cuando se usan directivas de validación angular en formularios que se generan dinámicamente usando la ngRepeatdirectiva. ( fuente )

Como es 2019, me gustaría dar una respuesta actualizada a esta pregunta. Es posible lograr el mismo resultado que las formas anidadas, pero sin anidarlas. HTML5 introdujo el atributo de formulario. Puede agregar el atributo de formulario a los controles de formulario fuera de un formulario para vincularlos a un elemento de formulario específico (por id).

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

De esta manera puede estructurar su html de esta manera:

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

El atributo de formulario es compatible con todos los navegadores modernos. Sin embargo, IE no es compatible con esto, pero IE ya no es un navegador, sino una herramienta de compatibilidad, como lo confirmó Microsoft: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-using-it-as-your-default / . Ya es hora de que dejemos de preocuparnos por hacer que las cosas funcionen en IE.

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

De la especificación html:

Esta característica permite a los autores evitar la falta de soporte para elementos de formulario anidados.

Otra forma de solucionar este problema, si está utilizando un lenguaje de script del lado del servidor que le permite manipular los datos publicados, es declarar su formulario html de esta manera:

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

Si imprime los datos publicados (usaré PHP aquí), obtendrá una matriz como esta:

//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',
      ),
    );

Entonces puedes hacer algo como:

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

Su $ _POST ahora solo tiene sus datos de "formulario principal", y sus datos de subformulario se almacenan en otra variable que puede manipular a voluntad.

¡Espero que esto ayude!

Como dijo Craig, no.

Pero, con respecto a su comentario sobre por qué :

Puede ser más fácil usar 1 <form>con las entradas y el botón "Actualizar", y usar entradas ocultas de copia con el botón "Enviar pedido" en otro <form>.

¡Tenga en cuenta que no puede anidar elementos FORM!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (la especificación html4 no observa cambios con respecto a los formularios de anidación de 3.2 a 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (la especificación html4 no observa cambios con respecto a los formularios de anidación de 4.0 a 4.1)

https://www.w3.org/TR/html5-diff/ (la especificación html5 no observa cambios en los formularios de anidación de 4 a 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms comentarios a "Esta característica permite a los autores evitar la falta de soporte para elementos de formulario anidados", pero no cito donde se especifica esto, creo que están asumiendo que debemos asumir que está especificado en la especificación html3 :)

Una solución simple es usar un iframe para contener el formulario "anidado". Visualmente, el formulario está anidado pero en el lado del código está en un archivo html por completo.

También puede usar formaction = "" dentro de la etiqueta del botón.

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

Esto estaría anidado en la forma original como un botón separado.

Incluso si pudiera hacer que funcione en un navegador, no hay garantía de que funcione de la misma manera en todos los navegadores. Entonces, si bien es posible que pueda hacer que funcione algunas veces, ciertamente no podrá hacerlo funcionar todo el tiempo.

Incluso tendría problemas para hacerlo funcionar en diferentes versiones del mismo navegador. Así que evita usar eso.

Si bien no presento una solución para formularios anidados (no funciona de manera confiable), sí presento una solución alternativa que funciona para mí:

Escenario de uso: una superforma que permite cambiar N elementos a la vez. Tiene un botón "Enviar todo" en la parte inferior. Cada elemento quiere tener su propio formulario anidado con un botón "Enviar elemento # N". Pero no puedo ...

En este caso, se puede utilizar realmente una sola forma, y luego tener el nombre de los botones sean submit_1.. submit_Ny submitAlly manejar los servidores de juego, con sólo mirar params que terminan en _1si el nombre del botón era 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>

Ok, no es un gran invento, pero hace el trabajo.

Acerca de los formularios de anidación: pasé 10 años una tarde tratando de depurar un script ajax.

mi respuesta / ejemplo anterior no tenía en cuenta el marcado html, lo siento.

<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 fallaba constantemente diciendo inválido form_2.

Cuando trasladé el contenedor ajax que produjo form_2 <i>outside</i>de form_1, volví al negocio. Es la respuesta a la pregunta de por qué uno podría anidar formas. Quiero decir, realmente, ¿para qué sirve la identificación si no es para definir qué formulario se utilizará? Debe haber una mejor y más flexible solución.

Use una etiqueta de formulario vacía antes de su formulario anidado

Probado y trabajado en Firefox, Chrome

No probado en IE

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

Aunque la pregunta es bastante antigua y estoy de acuerdo con @everyone en que la anidación de formularios no está permitida en HTML

Pero esto es algo que todos querrían ver esto

donde puedes hackear (lo llamo un hack porque estoy seguro de que esto no es legítimo) html para permitir que el navegador tenga un formulario anidado

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

No, no puede tener un formulario anidado. En su lugar, puede abrir un modal que contiene el formulario y realizar el envío del formulario Ajax.

Realmente no es posible ... No pude anidar etiquetas de formulario ... Sin embargo, utilicé este código:

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

con {% csrf_token %}y esas cosas

y aplicó un poco de 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
      }
  }
});

Hoy, también me quedé atrapado en el mismo problema y resolví el problema. Agregué un control de usuario y
en este control uso este código.

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

y en el evento PreRenderComplete de la página, llame a este método

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

Creo que esto ayudará.

Antes de darme cuenta de que no se suponía que debía hacer esto, había anidado formularios con el fin de tener varios botones de envío. Funcionó de esa manera durante 18 meses, miles de transacciones de registro, nadie nos llamó sobre ninguna dificultad.

Los formularios anidados me dieron una identificación para analizar la acción correcta que debo tomar. No se rompió hasta que intenté adjuntar un campo a uno de los botones y Validar se quejó. No fue un gran problema desenredarlo: utilicé un stringify explícito en el formulario externo, por lo que no importó el envío y el formulario no coincidía. Sí, sí, debería haber tomado los botones de un envío a un clic.

El punto es que hay circunstancias en las que no está completamente roto. Pero "no completamente roto" es quizás un estándar demasiado bajo para disparar :-)