Puoi nidificare moduli HTML?

È possibile nidificare moduli HTML come questo

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

in modo che entrambe le forme funzionino? Il mio amico sta avendo problemi con questo, una parte delle subFormopere, mentre un'altra parte no.

In una parola, no. Puoi avere diversi moduli in una pagina ma non devono essere nidificati.

Dalla bozza di lavoro html5 :

4.10.3 L' formelemento

Modello di contenuto:

Flusso di contenuto, ma senza discendenti di elementi del modulo.

Ho riscontrato un problema simile e so che non è una risposta alla domanda, ma può essere di aiuto a qualcuno con questo tipo di problema:
se è necessario inserire gli elementi di due o più forme in una determinata sequenza , l' attributo HTML5 <input> form può essere la soluzione.

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

1. L' attributo form è nuovo in HTML5.
2. Specifica a quale elemento appartiene <form>un <input>elemento. Il valore di questo attributo deve essere l'attributo id di un <form>elemento nello stesso documento.

Scenario :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Implementazione :

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

Qui troverai la compatibilità del browser.

Il secondo modulo verrà ignorato, ad esempio vedere lo snippet di 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 semplice non può permetterti di farlo. Ma con javascript puoi essere in grado di farlo. Se si utilizza javascript / jquery è possibile classificare gli elementi del modulo con una classe e quindi utilizzare serialize () per serializzare solo quegli elementi del modulo per il sottoinsieme degli elementi che si desidera inviare.

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

Quindi nel tuo JavaScript puoi farlo per serializzare gli elementi di classe 1

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

Per class2 potresti farlo

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

Per l'intera forma

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

o semplicemente

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

Se stai utilizzando AngularJS, tutti i <form>tag all'interno di te ng-appvengono sostituiti in fase di esecuzione con ngFormdirettive progettate per essere nidificate.

In forme angolari possono essere nidificati. Ciò significa che la forma esterna è valida quando sono valide anche tutte le forme figlio. Tuttavia, i browser non consentono l'annidamento di <form>elementi, quindi Angular fornisce la ngFormdirettiva che si comporta in modo identico <form>ma che può essere nidificata. Ciò consente di avere moduli nidificati, che è molto utile quando si utilizzano le direttive di convalida angolare in moduli generati dinamicamente mediante la ngRepeatdirettiva. ( fonte )

Dal 2019 vorrei dare una risposta aggiornata a questa domanda. È possibile ottenere lo stesso risultato delle forme nidificate, ma senza nidificarle. HTML5 ha introdotto l'attributo form. È possibile aggiungere l'attributo del modulo ai controlli del modulo all'esterno di un modulo per collegarli a un elemento del modulo specifico (per ID).

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

In questo modo puoi strutturare il tuo html in questo modo:

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

L'attributo form è supportato da tutti i browser moderni. IE non supporta questo, ma IE non è più un browser, ma uno strumento di compatibilità, come confermato da Microsoft stesso: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-using-it-as-your-default / . È ora che smettiamo di preoccuparci di far funzionare le cose in IE.

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

Dalle specifiche html:

Questa funzionalità consente agli autori di aggirare la mancanza di supporto per gli elementi di modulo nidificati.

Un altro modo per aggirare questo problema, se si utilizza un linguaggio di scripting lato server che consente di manipolare i dati pubblicati, è dichiarare il modulo HTML in questo modo:

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

Se stampi i dati pubblicati (userò PHP qui), otterrai un array come questo:

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

Quindi puoi semplicemente fare qualcosa del tipo:

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

Il tuo $ _POST ora ha solo i tuoi dati "modulo principale", e i tuoi dati di sottomaschera sono memorizzati in un'altra variabile che puoi manipolare a piacimento.

Spero che sia di aiuto!

Come ha detto Craig, no.

Ma, per quanto riguarda il tuo commento sul perché :

Potrebbe essere più semplice utilizzare 1 <form>con gli input e il pulsante "Aggiorna" e utilizzare gli input nascosti copia con il pulsante "Invia ordine" in un altro <form>.

Nota che non ti è permesso nidificare gli elementi FORM!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (la specifica html4 non rileva alcuna modifica relativa ai moduli di nidificazione da 3.2 a 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (la specifica html4 non rileva alcuna modifica relativa ai moduli di nidificazione dalla 4.0 alla 4.1)

https://www.w3.org/TR/html5-diff/ (la specifica html5 non rileva alcuna modifica relativa ai moduli di nidificazione da 4 a 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms commenti a "Questa funzione consente agli autori di aggirare la mancanza di supporto per gli elementi di modulo nidificati", ma non non cito dove questo è specificato, penso che stiano assumendo che dovremmo presumere che sia specificato nella specifica html3 :)

Una semplice soluzione consiste nell'utilizzare un iframe per contenere il modulo "nidificato". Visivamente il modulo è nidificato ma sul lato del codice è del tutto in un file html separato.

Puoi anche utilizzare formaction = "" all'interno del tag pulsante.

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

Questo sarebbe nidificato nella forma originale come un pulsante separato.

Anche se riesci a farlo funzionare in un browser, non c'è garanzia che funzioni allo stesso modo in tutti i browser. Quindi, mentre potresti riuscire a farlo funzionare un po ' di tempo, sicuramente non sarai in grado di farlo funzionare tutto il tempo.

Avresti anche problemi a farlo funzionare in diverse versioni dello stesso browser. Quindi evita di usarlo.

Sebbene non presenti una soluzione ai moduli nidificati (non funziona in modo affidabile), presento una soluzione alternativa che funziona per me:

Scenario di utilizzo: una superforma che consente di cambiare N elementi contemporaneamente. Ha un pulsante "Invia tutto" in basso. Ogni articolo vuole avere il proprio modulo nidificato con un pulsante "Invia articolo # N". Ma non posso ...

In questo caso, si può effettivamente utilizzare un solo modulo e quindi avere il nome dei pulsanti siano submit_1.. submit_Ned submitAlle gestire i server-side, da solo guardando params che terminano con _1se il nome del pulsante è stato 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, quindi non c'è molto di un'invenzione, ma fa il lavoro.

Informazioni sui moduli di nidificazione: ho trascorso 10 anni un pomeriggio cercando di eseguire il debug di una sceneggiatura Ajax.

la mia risposta / esempio precedente non ha tenuto conto del markup html, scusa.

<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 costantemente fallito dicendo form_2 non valido.

Quando ho spostato l'AjaxContainer che produceva form_2 <i>outside</i>di form_1, ero di nuovo in affari. È la risposta alla domanda sul perché si potrebbero nidificare le forme. Voglio dire, davvero, qual è l'ID se non definire quale modulo deve essere utilizzato? Deve esserci un lavoro migliore e più fluido.

Usa il tag del modulo vuoto prima del modulo nidificato

Testato e lavorato su Firefox, Chrome

Non testato su IE

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

Anche se la domanda è piuttosto vecchia e concordo con @everyone, la nidificazione del modulo non è consentita in HTML

Ma questo qualcosa che tutti potrebbero voler vedere questo

dove puoi hackerare (lo chiamo hack perché sono sicuro che questo non è legittimo) html per consentire al browser di avere una forma nidificata

<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, non puoi avere un modulo nidificato. Invece puoi aprire un Modale che contiene un modulo ed eseguire l'invio del modulo Ajax.

Davvero impossibile ... Non ho potuto nidificare i tag del modulo ... Tuttavia ho usato questo codice:

<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 %} e roba

e applicato alcuni 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
      }
  }
});

Oggi, mi sono bloccato anche nello stesso problema e risolvo il problema Ho aggiunto un controllo utente e
su questo controllo uso questo codice

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

e all'evento PreRenderComplete della pagina chiama questo metodo

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

Credo che questo aiuterà.

Prima di rendermi conto che non avrei dovuto farlo, avevo moduli nidificati allo scopo di avere più pulsanti di invio. Ho funzionato in questo modo per 18 mesi, migliaia di transazioni di iscrizione, nessuno ci ha chiamato per eventuali difficoltà.

I moduli nidificati mi hanno fornito un ID per analizzare l'azione corretta da eseguire. Non ho rotto fino a quando ho cercato di collegare un campo a uno dei pulsanti e Convalida si è lamentato. Non è stato un grosso problema per districare - ho usato un stringify esplicito sul modulo esterno in modo che non importasse l'invio e il modulo non corrispondevano. Sì, sì, avrei dovuto prendere i pulsanti da un invio a un onclick.

Il punto è che ci sono circostanze in cui non è completamente rotto. Ma "non del tutto rotto" è forse uno standard troppo basso per cui sparare :-)