Können Sie HTML-Formulare verschachteln?

451

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.

Levi
quelle
Er richtet einen Einkaufswagen ein, in dem sich die Aktualisierungsmenge innerhalb des Formulars befindet, in dem die Gesamtsummen erfasst werden. Ich persönlich würde das nicht tun, aber er hat Probleme, das zum Laufen zu bringen.
Levi
1
Es scheint, als wäre es besser, Javascript zu verwenden, um Werte von einem Formular in das andere zu kopieren, als zu versuchen, sie zu verschachteln. Ich denke nicht, dass die Verschachtelung funktionieren wird.
Ben
15
Alte Frage, aber um den Kommentar zu beantworten, könnten Verschachtelungsformulare erforderlich sein, um JavaScript zu vermeiden. Ich stoße darauf, weil ich Formulare für Schaltflächen zum Zurücksetzen von Unterformularen verschachteln möchte, für die kein JavaScript aktiviert sein muss.
Vol7ron
1
Mögliches Duplikat von: stackoverflow.com/questions/597596/…
Yankee

Antworten:

459

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.

Craig
quelle
126
Ich stimme der Antwort zu, aber um einen anderen zu fragen, warum nicht? Warum erlaubt HTML keine Verschachtelung von Formularen? Für mich scheint es eine Einschränkung zu sein, ohne die wir besser dran wären. Es gibt viele Beispiele, bei denen die Verwendung verschachtelter Formulare einfacher zu programmieren wäre (dh die Verwendung eines Upload-Fotoformulars mit einem Profilbearbeitungsformular).
Ryan
20
@Nilzor er fragt nicht, ob es nicht geht oder nicht, er fragt warum nicht. Genau; Verschachtelungsformen sind eigentlich sehr nützlich. Wenn Sie also eine einseitige App mit Registerkarten haben, ist jede Registerkarte ein eigenes Formular (damit Sie sie senden können, um den Fortschritt zu speichern), und alle sind in ein Formular eingeschlossen, das Sie senden können, um alles zu speichern. Für mich ergibt das Sinn.
Rob Grant
5
Ich stimme dem zu, was andere gesagt haben. Diese Einschränkung erscheint willkürlich und schädlich.
Aroth
12
Wir brauchen also HTML 5.1 mit verschachtelten Formularen.
Hector
3
Das Problem bei verschachtelten Formularen ist die Formulararchitektur in HTML, bei der Aktionen in diesem Formular zu einem Übermittlungsereignis führen. Die Frage bekommt Haare darüber, was eingereicht werden muss. Sie können mehrere Felder in einem Formular oder mehrere Formulare in einem Div haben, aber es ist nicht wirklich sinnvoll, Formulare in einem Formular zu haben. Wenn der Inhalt zusammen passt, ist alles eine Form. Wenn Inhalte separat eingereicht werden, handelt es sich um wirklich separate Formulare, für die kein äußeres Formular erforderlich ist.
Kyle Baker
96

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.

Cliff Burton
quelle
1
es funktioniert super! sollte in der akzeptierten Antwort enthalten sein
Nahouto
1
Nur um auf die Browser-Support-Tabelle zu verweisen: caniuse.com/#feat=form-attribute Wiederaufnahme - es funktioniert überall (Chrome, Firefox, Opera, Egde, Safari, Android-Browser ...) außer IE (einschließlich der neuesten Version 11). .
Dmikam
@ Cliff-Burton, was ist der Unterschied hier? Ich kann nur Eingaben außerhalb des Formulars sehen. JS müsste weiterhin beide Formulare gleichzeitig einreichen. Wäre es nicht?
SDLINS
Äh, es ist lange her, seit ich das letzte Mal verwendet habe, aber ich denke, JS ist für das Absenden des Formulars nicht erforderlich. Vorausgesetzt, dass das <input type="submit"mit seinem verknüpft ist, <form>das ein angibt action, werden die <input />mit demselben verknüpften <form>in dieser Anfrage verwendet
Cliff Burton
90

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;
}
Vitalii Fedorenko
quelle
43

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();
user2420019
quelle
31

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 )

roufamatisch
quelle
Dies war die Antwort, nach der ich gesucht habe :) Und ja, es ist sinnvoll, Formulare zu verschachteln, denn wenn Sie mehrere Registerkarten haben, aber nur eine Überprüfung validieren möchten, können Sie dies mit verschachtelten Formularen tun.
NeverGiveUp161
Ist es das gleiche für Webkomponenten?
Gangadhar JANNU
31

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.

Kreativ
quelle
Was ist der Unterschied hier? Ich kann nur Eingaben außerhalb des Formulars sehen. JS müsste weiterhin beide Formulare gleichzeitig einreichen. Wäre es nicht?
SDLINS
@sdlins Nein, die Idee ist, Hauptkomponente und Unterkomponente so zu gestalten, wie sie verschachtelt aussehen sollen. Die tatsächlichen 2 Formular-Tags sind unsichtbar. Jede Senden-Schaltfläche löst das entsprechende Formular-Senden aus. Es ist kein Javascript erforderlich.
Kreativ
Wenn Sie nur das eine oder andere Formular auslösen möchten , ok. Aber wie würde es sich auflösen, wenn Sie das "übergeordnete" Element auslösen müssen? Form mit ihren Kinderformen wie es eine war und ohne js?
SDLINS
@sdlins darum geht es in dieser Frage nicht. Die Frage betrifft zwei verschiedene Formen, die jedoch verschachtelt sind. Ich frage mich, warum Sie 2 Formulare haben möchten, aber immer noch 1 Übermittlungsfunktion? Kannst du dann nicht einfach 1 Formular haben? Sie müssen in der Tat auf Javascript zurückgreifen, um so etwas Seltsames zu erreichen: P
Creative
Ja, du hast recht, das ist nicht die OP-Frage. Ich werde meine eigenen posten. Vielen Dank!
SDLINS
12

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!

Pierre
quelle
11

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

Jonathan Lonowski
quelle
Ich habe meine Warenkorbseite so gemacht, er ist einfach einen anderen Weg gegangen und wollte ihn nicht ändern. Ich war mir nicht sicher, ob seine Methode auch so gültig war.
Levi
9

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

Mark Peterson
quelle
23
Ich habe keine Ahnung, warum Sie eine Frage posten würden, die dreieinhalb Jahre beantwortet wurde, aber problematischer ist die Verknüpfung mit HTML3, die seit langem keine Empfehlung mehr ist.
Aidiakapi
7
Es ist ein Hinweis darauf, wie lange die zugrunde liegende Frage beantwortet wurde, was ich für konstruktiv hielt. Außerdem fand ich das taktfreie "Hinweis, dass Sie keine FORM-Elemente verschachteln dürfen!" innerhalb der Spezifikation humorvoll zu sein.
Mark Peterson
1
Dies ist ein Problem, weil ich eine API einfügen muss, die ein Formular ist, und weil die .net-App (die alles mit einem <form> -Tag umschließt). Wie überwinden Sie dieses Problem?
Gelee46
4

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.

Ezion
quelle
1
Die Zeit ist abgelaufen für Iframes
Muhammad Tayyab
3

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.

Chief Buddy
quelle
Dies beantwortet die Frage nicht, aber dies hat mir nur geholfen, ein anderes Problem zu lösen, das ich so aufgegeben habe
codeAndStuff
oben ignorieren (würde mich nach 5 Minuten nicht bearbeiten lassen ... hmm). große Hilfe hier - genau auf das abgestimmt, was ich heute Morgen versucht habe. Deshalb lieben wir alle SO
CodeAndStuff
2

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.

Mike Hofer
quelle
2

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

MP.
quelle
2

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.

Peter V. Mørch
quelle
1

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.

Larry
quelle
1

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>
Fatih
quelle
Als ich dies auf Chrome versuchte, gab es dieses <form name = "mainForm"> </ form> <form name = "subForm"> </ form> aus
ianace
1
Haben Sie es mit der Schaltfläche "Senden" versucht? Ich habe diese Methode oft angewendet und immer gearbeitet.
Fatih
10
Dies ist ein Verstoß gegen die Spezifikation und deren Verwendung bittet um zukünftige Probleme.
Oskar Berggren
Neuere Webkit-Versionen entfernen nur die verschachtelten Formularelemente.
woens
0

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/

Viren
quelle
0

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.

Shree Sthapit
quelle
0

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
      }
  }
});
diogosimao
quelle
-1

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.

Shivanshu
quelle
-1

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

Roger Krueger
quelle