estructura - formularios html css

¿Puedes anidar formularios html?

Question

¿Es posible anidar formularios html como este?

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

¿Para que funcionen ambas formas? Mi amigo está teniendo problemas con esto, una parte del subForm funciona, mientras que otra parte no lo hace.

Answer 1

Tenga en cuenta que no está permitido anidar elementos FORM!

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

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (la especificación html4 no tiene cambios con respecto a las formas de anidación de 3.2 a 4)

https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (la especificación html4 no tiene 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 indica cambios en los formularios de anidación de 4 a 5)

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

Answer 2

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

mi respuesta / ejemplo anterior no tuvo 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 falla constantemente diciendo que form_2 no es válido.

Cuando moví el ajaxContainer que produjo form_2 <i>outside</i> de form_1, estaba de vuelta en el negocio. Es la respuesta a la pregunta de por qué uno podría anidar las formas. Quiero decir, realmente, ¿cuál es el ID para no definir qué formulario se va a utilizar? Debe haber una solución mejor, más pulida.

Answer 3

Antes de saber que no debía hacer esto, tenía formularios anidados con el propósito de tener varios botones de envío. Corrió de esa manera durante 18 meses, miles de transacciones de registro, nadie nos llamó por ninguna dificultad.

Los formularios anidados me dieron una identificación para analizar la acción correcta a tomar. No se rompió hasta que traté de adjuntar un campo a uno de los botones y Validar se quejó. No fue un gran problema para desentrañar, usé una cadena de caracteres explícita en el formulario externo para que no importara el envío y el formulario no coincidiera. 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 del todo roto" es quizás un estándar demasiado bajo para disparar :-)

Answer 4

Aunque la pregunta es bastante antigua y estoy de acuerdo con @everyone en que el anidamiento de formas no está permitido en HTML

Pero todo este algo podría querer ver esto.

donde puede piratear (lo llamo hackear porque estoy seguro de que no es legítimo) html para permitir que el navegador tenga forma anidada

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

Answer 5

Como dijo Craig, no.

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

Podría ser más fácil usar 1 <form> con las entradas y el botón "Actualizar", y usar copiar las entradas ocultas con el botón "Enviar pedido" en otra <form> .

Answer 6

El HTML simple no puede permitirte hacer esto. Pero con javascript puedes hacer eso. Si está utilizando javascript / jquery, puede clasificar sus elementos de formulario con una clase y luego usar serialize () para serializar solo aquellos 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 class1

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

Para class2 podías hacer

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

Para toda la forma.

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

o simplemente

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

Answer 7

El segundo formulario se ignorará, vea el snippet 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;
}

Answer 8

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

Del borrador de trabajo de html5 :

4.10.3 El elemento de form

Modelo de contenido:

Flujo de contenido, pero sin elementos de forma descendientes.

Answer 9

Hoy, también me quedé atascado en el mismo problema y resolví el problema. Agregué un control de usuario y
en este control utilizo 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á.

Answer 10

Incluso si pudiera hacer que funcione en un navegador, no hay garantía de que funcionaría igual en todos los navegadores. Por lo tanto, si bien es posible que pueda hacerlo funcionar parte del tiempo, ciertamente no podrá hacerlo funcionar todo el tiempo.

Answer 11

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

Answer 12

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 colocar los elementos de dos o más formas en una secuencia dada, el atributo de <input> form HTML5 <input> form puede ser la solución.

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

1. El atributo de formulario es nuevo en HTML5.
2. Especifica a qué elemento <form> pertenece un elemento <input> . El valor de este atributo debe ser el atributo id de un elemento <form> 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" />

Here encontrarás la compatibilidad del navegador.

Answer 13

No, no puedes tener una forma anidada. En su lugar, puede abrir un Modal que contenga el formulario y realizar el envío del formulario Ajax.

Answer 14

Otra forma de solucionar este problema, si está utilizando algún lenguaje de secuencias de comandos 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 los datos de su subformulario se almacenan en otra variable que puede manipular a voluntad.

¡Espero que esto ayude!

Answer 15

Si bien no presento una solución para formularios anidados (no funciona de manera confiable), sí presento una solución 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 artículo quiere tener su propia forma anidada con un botón "Enviar artículo # N". Pero no puedo

En este caso, uno puede usar un solo formulario y luego hacer que el nombre de los botones sea submit_1 .. submit_N y submitAll y manejarlo desde el lado del servidor, solo mirando los parámetros que terminan en _1 si 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 mucho de un invento, pero hace el trabajo.

Answer 16

Si está utilizando AngularJS, cualquier etiqueta <form> dentro de su ng-app se reemplazará en tiempo de ejecución con directivas ngForm que están diseñadas para ser anidadas.

En formas angulares se pueden anidar. Esto significa que la forma externa es válida cuando todas las formas secundarias también son válidas. Sin embargo, los navegadores no permiten el anidamiento de elementos <form> , por lo que Angular proporciona la directiva ngForm que se comporta de forma idéntica a <form> pero puede anidarse. Esto le permite tener formularios anidados, lo cual es muy útil cuando se usan directivas de validación angular en formularios que se generan dinámicamente usando la directiva ngRepeat . ( source )

Answer 17

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

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

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

Answer 18

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

Answer 19

Use la etiqueta de formulario vacío antes de su forma anidada

Probado y trabajado en Firefox, Chrome

No probado en IE

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