Können Sie HTML-Formulare verschachteln?

Ist es möglich, HTML-Formulare wie dieses zu verschachteln?

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

damit beide Formen funktionieren? Mein Freund hat Probleme damit, ein Teil der subFormArbeiten, während ein anderer Teil dies nicht tut.

Mit einem Wort, nein. Sie können mehrere Formulare auf einer Seite haben, diese sollten jedoch nicht verschachtelt sein.

Aus dem HTML5-Arbeitsentwurf :

4.10.3 Das formElement

Inhaltsmodell:

Flow-Inhalt, jedoch ohne Nachkommen von Formularelementen.

Ich bin auf ein ähnliches Problem gestoßen, und ich weiß, dass dies keine Antwort auf die Frage ist, aber es kann für jemanden mit dieser Art von Problem hilfreich sein:
Wenn die Elemente von zwei oder mehr Formen in eine bestimmte Reihenfolge gebracht werden müssen kann das HTML5- <input> form Attribut die Lösung sein.

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

1. Das Formular Attribut ist neu in HTML5.
2. Gibt an, zu welchem <form>Element ein <input>Element gehört. Der Wert dieses Attributs muss das ID-Attribut eines <form>Elements im selben Dokument sein.

Szenario :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Implementierung :

<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 die Kompatibilität des Browsers.

Das zweite Formular wird ignoriert. Siehe das Snippet aus WebKit zum Beispiel:

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

Normales HTML kann dies nicht zulassen. Aber mit Javascript können Sie das tun. Wenn Sie Javascript / jquery verwenden, können Sie Ihre Formularelemente mit einer Klasse klassifizieren und dann mit serialize () nur die Formularelemente für die Teilmenge der Elemente serialisieren, die Sie senden möchten.

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

Dann könnten Sie dies in Ihrem Javascript tun, um Elemente der Klasse 1 zu serialisieren

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

Für Klasse 2 könnten Sie tun

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

Für die ganze Form

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

oder einfach

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

Wenn Sie AngularJS verwenden, werden alle <form>Tags in Ihrem ng-appzur Laufzeit durch ngFormAnweisungen ersetzt, die verschachtelt werden sollen.

In Winkelformen können verschachtelt werden. Dies bedeutet, dass das äußere Formular gültig ist, wenn auch alle untergeordneten Formulare gültig sind. Browser erlauben jedoch keine Verschachtelung von <form>Elementen, daher stellt Angular die ngFormDirektive bereit, die sich identisch verhält, <form>aber verschachtelt werden kann. Auf diese Weise können Sie verschachtelte Formulare verwenden. Dies ist sehr nützlich, wenn Sie Anweisungen zur Winkelüberprüfung in Formularen verwenden, die mithilfe der ngRepeatAnweisung dynamisch generiert werden . ( Quelle )

Da es 2019 ist, möchte ich eine aktualisierte Antwort auf diese Frage geben. Es ist möglich, dasselbe Ergebnis wie bei verschachtelten Formularen zu erzielen, ohne sie jedoch zu verschachteln. HTML5 führte das Formularattribut ein. Sie können das Formularattribut Formularsteuerelementen außerhalb eines Formulars hinzufügen, um sie mit einem bestimmten Formularelement (nach ID) zu verknüpfen.

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

Auf diese Weise können Sie Ihr HTML wie folgt strukturieren:

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

Das Formularattribut wird von allen modernen Browsern unterstützt. IE unterstützt dies zwar nicht, aber IE ist kein Browser mehr, sondern ein Kompatibilitätstool, wie von Microsoft selbst bestätigt: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-hör-auf-es-als-dein-Standard zu verwenden / . Es ist an der Zeit, dass wir uns nicht mehr darum kümmern, dass die Dinge im IE funktionieren.

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

Aus der HTML-Spezifikation:

Mit dieser Funktion können Autoren die mangelnde Unterstützung für verschachtelte Formularelemente umgehen.

Eine andere Möglichkeit, dieses Problem zu umgehen, wenn Sie eine serverseitige Skriptsprache verwenden, mit der Sie die veröffentlichten Daten bearbeiten können, besteht darin, Ihr HTML-Formular wie folgt zu deklarieren:

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

Wenn Sie die veröffentlichten Daten drucken (ich werde hier PHP verwenden), erhalten Sie ein Array wie das folgende:

//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 einfach so etwas tun wie:

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

Ihr $ _POST enthält jetzt nur noch Ihre "Hauptformular" -Daten, und Ihre Unterformulardaten werden in einer anderen Variablen gespeichert, die Sie nach Belieben bearbeiten können.

Hoffe das hilft!

Wie Craig sagte, nein.

Aber in Bezug auf Ihren Kommentar, warum :

Es ist möglicherweise einfacher, 1 <form>mit den Eingaben und der Schaltfläche "Aktualisieren" zu verwenden und versteckte Eingaben mit der Schaltfläche "Bestellung senden" in einer anderen zu kopieren <form>.

Beachten Sie, dass Sie keine FORM-Elemente verschachteln dürfen!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (HTML4-Spezifikation stellt keine Änderungen in Bezug auf Verschachtelungsformen von 3.2 auf 4 fest)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (HTML4-Spezifikation stellt keine Änderungen bezüglich Verschachtelungsformen von 4.0 auf 4.1 fest)

https://www.w3.org/TR/html5-diff/ (HTML5-Spezifikation stellt keine Änderungen in Bezug auf Verschachtelungsformen von 4 bis 5 fest)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms Kommentare zu "Mit dieser Funktion können Autoren die mangelnde Unterstützung für verschachtelte Formularelemente umgehen." nicht zitieren, wo dies angegeben ist, ich denke, sie gehen davon aus, dass wir davon ausgehen sollten, dass es in der HTML3-Spezifikation angegeben ist :)

Eine einfache Problemumgehung besteht darin, einen Iframe zu verwenden, um das "verschachtelte" Formular zu speichern. Visuell ist das Formular verschachtelt, aber auf der Codeseite befindet es sich insgesamt in einer separaten HTML-Datei.

Sie können auch formaction = "" innerhalb des Schaltflächen-Tags verwenden.

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

Dies würde im Originalformular als separate Schaltfläche verschachtelt.

Selbst wenn Sie es in einem Browser zum Laufen bringen könnten, gibt es keine Garantie dafür, dass es in allen Browsern gleich funktioniert. So , während Sie in der Lage sein könnte , um es zu arbeiten , einige der Zeit, würden Sie sicherlich nicht in der Lage sein , es zu bekommen zu arbeiten alle der Zeit.

Sie hätten sogar Probleme damit, dass es in verschiedenen Versionen desselben Browsers funktioniert. Vermeiden Sie es also, das zu benutzen.

Ich präsentiere zwar keine Lösung für verschachtelte Formulare (sie funktioniert nicht zuverlässig), aber ich präsentiere eine Problemumgehung, die für mich funktioniert:

Verwendungsszenario: Eine Superform, mit der N Elemente gleichzeitig geändert werden können. Es hat eine Schaltfläche "Alle senden" am unteren Rand. Jedes Element möchte ein eigenes verschachteltes Formular mit der Schaltfläche "Artikel Nr. N senden" haben. Aber kann nicht ...

In diesem Fall kann man tatsächlich ein einzelnes Formular verwenden und dann den Namen der Schaltflächen haben submit_1.. submit_Nund submitAlles serverseitig behandeln, indem man nur Parameter betrachtet, die auf enden, _1wenn 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 keine große Erfindung, aber es macht den Job.

Informationen zum Verschachteln von Formularen: Ich habe an einem Nachmittag 10 Jahre lang versucht, ein Ajax-Skript zu debuggen.

Meine vorherige Antwort / mein vorheriges Beispiel hat das HTML-Markup leider nicht berücksichtigt.

<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 hat ständig versagt, ungültiges form_2 zu sagen.

Als ich den ajaxContainer verschoben habe, der form_2 <i>outside</i>von form_1 erzeugt hat, war ich wieder im Geschäft. Es ist die Antwort auf die Frage, warum man Formen verschachteln könnte. Ich meine wirklich, wofür ist die ID, wenn nicht definiert werden soll, welches Formular verwendet werden soll? Es muss eine bessere, schlankere Lösung geben.

Verwenden Sie ein leeres Formular-Tag vor Ihrem verschachtelten Formular

Getestet und gearbeitet auf Firefox, Chrome

Nicht im IE getestet

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

Obwohl die Frage ziemlich alt ist und ich mit @jeder übereinstimme, ist das Verschachteln von Formularen in HTML nicht zulässig

Aber das ist etwas, was alle vielleicht sehen wollen

wo Sie HTML hacken können (ich nenne es einen Hack, da ich sicher bin, dass dies nicht legitim ist), damit der Browser eine verschachtelte Form hat

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

Nein, Sie können kein verschachteltes Formular haben. Stattdessen können Sie ein Modal öffnen, das ein Formular enthält, und das Senden eines Ajax-Formulars durchführen.

Wirklich nicht möglich ... Ich konnte keine Formular-Tags verschachteln ... Ich habe jedoch diesen Code verwendet:

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

mit {% csrf_token %}und so

und einige JS angewendet

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

Heute bin ich auch in demselben Problem stecken geblieben und habe das Problem behoben, bei dem ich ein Benutzersteuerelement hinzugefügt habe, und
auf diesem Steuerelement 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>

Rufen Sie beim PreRenderComplete-Ereignis der Seite 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.

Bevor ich wusste, dass ich das nicht tun sollte, hatte ich verschachtelte Formulare, um mehrere Senden-Schaltflächen zu haben. Lief 18 Monate lang so, Tausende von Anmeldetransaktionen, niemand rief uns wegen irgendwelcher Schwierigkeiten an.

Verschachtelte Formulare gaben mir einen Ausweis zum Analysieren, damit die richtige Aktion ausgeführt werden konnte. Brach nicht, bis ich versuchte, ein Feld an eine der Schaltflächen anzuhängen, und Validate beschwerte sich. Es war keine große Sache, es zu entwirren - ich habe eine explizite Zeichenfolge für das äußere Formular verwendet, sodass es keine Rolle spielte, ob das Senden und das Formular nicht übereinstimmten. Ja, ja, hätte die Schaltflächen von einem Submit zu einem Onclick nehmen sollen.

Punkt ist, dass es Umstände gibt, unter denen es nicht ganz kaputt ist. Aber "nicht ganz kaputt" ist vielleicht ein zu niedriger Standard, um zu schießen :-)