Kann man verschachteln, html Formulare?

In einem Wort, Nein. Sie können mehrere Formulare in einer Seite, aber Sie sollten nicht geschachtelt werden.

Aus der html5 working draft:

4.10.3 Die form element

Content-Modell:

Flow Inhalt, aber ohne form-element Nachkommen.

InformationsquelleAutor Craig

Ich lief in ein ähnliches problem, und ich weiß, dass ist keine Antwort auf die Frage, aber es kann helfen, jemanden mit dieser Art von problem:

wenn Bedarf besteht, stellen die Elemente von zwei oder mehr Formen in einer bestimmten Reihenfolge, die HTML5 <input> form Attribut kann die Lösung sein.

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

1. Form Attribut ist neu in HTML5.
2. Gibt an, welche <form> element eine <input> element gehört. Der Wert dieses Attributs muss das id-Attribut eines <form> element im selben Dokument.

Szenario:

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Umsetzung:

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

Hier finden Sie browser-Kompatibilität.

InformationsquelleAutor Cliff Burton

Wenn Sie mit AngularJS, jede <form> tags innerhalb ng-app ersetzt, die zur Laufzeit mit ngForm Richtlinien, die entworfen sind, um geschachtelt werden.

In Eckigen Formen können geschachtelt werden. Dies bedeutet, dass die äußere form ist gültig, wenn alle untergeordneten Formen sind genauso gültig. Allerdings Browser nicht erlauben Verschachtelung von <form> Elemente, so Eckig bietet die ngForm Richtlinie, die verhält sich identisch zu <form> aber geschachtelt werden können. Dies ermöglicht Ihnen, verschachtelten Formen, die sehr nützlich bei der Verwendung von Winkel-Validierung Richtlinien in Formularen, die dynamisch generiert werden, mit der ngRepeat Richtlinie. (Quelle)

InformationsquelleAutor roufamatic

Einen anderen Weg, dieses problem zu umgehen, wenn Sie einige server-side-scripting-Sprache, die ermöglicht Ihnen die Bearbeitung der geposteten Daten, ist zu erklären, das html-Formular wie dieses :

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

Wenn Sie drucken, werden die geposteten Daten (ich verwende PHP hier), erhalten Sie ein array wie dieses :

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

Dann können Sie nur so etwas wie :

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

Ihre $_POST hat jetzt nur Ihren "Hauptformular" Daten und Unterformular die Daten in andere variable, die Sie Bearbeiten können.

Hoffe, das hilft!

InformationsquelleAutor Pierre

Als es 2019 möchte ich eine aktualisierte Antwort auf diese Frage. Ist es möglich das gleiche Ergebnis zu erzielen als geschachtelte Formen, aber ohne Verschachtelung. HTML5 eingeführt, die das form-Attribut. Können Sie das form-Attribut, Formular-Steuerelemente außerhalb eines Formulars zur Verknüpfung mit einem spezifischen Formular-element (per id).

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

Diese Weise können Sie die Struktur der html so:

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

Form-Attribut wird unterstützt von allen modernen Browsern. IE nicht unterstützt wird, aber der IE ist kein browser mehr, sondern ein Kompatibilitäts-tool von Microsoft bestätigt sich: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/. Es ist Zeit, dass wir aufhören, die Sorge um die Dinge funktionieren im IE.

https://caniuse.com/#feat=form-attribute

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

Aus der html-spec:

Diese Funktion erlaubt es den Autoren zu arbeiten, um den Mangel an Unterstützung für
verschachtelte Elemente bilden.

InformationsquelleAutor Creative

Selbst wenn, du könntest es, um in einem browser, es gibt keine Garantie, dass es funktionieren würde, das gleiche in allen Browsern. So, während Sie könnte in der Lage sein, um es zu arbeiten einige der Zeit, Sie würde sicherlich nicht in der Lage sein, um es zu arbeiten alle der Zeit.

InformationsquelleAutor Mike Hofer

Während ich nicht anwesend, eine Lösung für verschachtelte Formulare (es funktioniert nicht zuverlässig), ich präsentieren ein workaround, funktioniert für mich:

Einsatzszenario: Eine superform zu ändern, so dass N Elemente auf einmal. Es hat einen "Submit" button an der Unterseite. Jedes Element haben will, um seine eigene verschachtelte Formular mit "Submit Item # N" - Taste. Aber kann nicht...

In diesem Fall kann man eigentlich die Verwendung einer einzigen form, und dann der name des buttons werden submit_1..submit_N und submitAll und behandeln-Server-Seite nur betrachten, params endet in _1 wenn der name der Schaltfläche war 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, also nicht viel von einer Erfindung, aber es macht den job.

InformationsquelleAutor Peter V. Mørch

Zum verschachteln von Formen: ich verbrachte 10 Jahre ein Nachmittag versucht zu Debuggen einer ajax-Skript.

meine Vorherige Antwort/Beispiel nicht für die html-markup, sorry.

<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 ständig fehlgeschlagen zu sagen ungültig form_2.

Als ich zog die ajaxContainer, produziert form_2 <i>outside</i> von form_1, ich war wieder im Geschäft. Es die Antwort auf die Frage, warum man möglicherweise nest Formen. Ich meine, wirklich, was ist die ID für, wenn nicht zu definieren, welche form verwendet werden soll? Es muss eine bessere, intelligenter umgehen.

InformationsquelleAutor larry

Obwohl die Frage ist ziemlich alt, und ich Stimme mit @alle, die Verschachtelung von form-ist nicht erlaubt in HTML -

Aber dieses etwas allen vielleicht möchten Sie sehen, dieses

wo man hacken kann(ich nenne es ein hack, da bin ich sicher, dies ist nicht legitim) html-browser zulassen, um geschachtelte form

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

InformationsquelleAutor Viren

Heute bin ich auch stecken geblieben in der gleichen Ausgabe, und das Problem zu beheben ich habe ein user control und

auf dieses control verwende ich diesen code

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

und auf PreRenderComplete-Ereignis der Seite rufen Sie diese Methode auf

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

Ich glaube, das wird helfen.

InformationsquelleAutor Shivanshu

Nein, Sie können Sie an einer verschachtelten form. Stattdessen können Sie eröffnen eine Modal, enthält form und ausführen von Ajax Formular Absenden.

InformationsquelleAutor Shree Sthapit