it-swarm.com.de

Können Sie HTML-Formulare verschachteln?

Ist es möglich, HTML-Formulare so zu verschachteln

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

damit beide formen funktionieren? Mein Freund hat Probleme damit, ein Teil der subForm arbeitet, ein anderer Teil nicht.

400
Levi

In 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 form-Element

Inhaltsmodell:

Flussinhalt, jedoch ohne Nachkommen von Formularelementen.

417
Craig

Das zweite Formular wird ignoriert, siehe zum Beispiel snippet from 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;
}
85

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 diesem Problem hilfreich sein:
Wenn die Elemente von zwei oder mehr Formularen in eine bestimmte Reihenfolge eingefügt 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 attribute 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.

63
Cliff Burton

Einfaches HTML kann dies nicht zulassen. Mit Javascript können Sie dies jedoch tun ... Wenn Sie Javascript/Jquery verwenden, können Sie Ihre Formularelemente mit einer Klasse klassifizieren und dann serialize () verwenden, um nur die Formularelemente für die Teilmenge der gewünschten Elemente zu serialisieren einreichen.

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

Dann können Sie in Ihrem Javascript die Elemente der Klasse 1 serialisieren

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

Für Klasse 2 könnten Sie das tun

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

Für das ganze Formular

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

oder einfach

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

Wenn Sie AngularJS verwenden, werden alle <form>-Tags in Ihrem ng-app zur Laufzeit durch ngForm-Direktiven ersetzt, die verschachtelt werden sollen.

In Winkelformen können verschachtelt werden. Dies bedeutet, dass das äußere Formular gültig ist, wenn alle untergeordneten Formulare ebenfalls gültig sind. Browser erlauben jedoch keine Verschachtelung von <form>-Elementen. Daher stellt Angular die ngForm-Direktive bereit, die sich identisch zu <form> verhält, aber geschachtelt werden kann. Auf diese Weise können Sie verschachtelte Formulare verwenden, was sehr nützlich ist, wenn Angular-Validierungsanweisungen in Formularen verwendet werden, die mithilfe der ngRepeat-Direktive dynamisch generiert werden. ( Quelle )

29
roufamatic

Wie Craig gesagt hat, nein.

Aber zu Ihrem Kommentar zu warum :

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

11

Wenn Sie eine serverseitige Skriptsprache verwenden, mit der Sie die veröffentlichten Daten bearbeiten können, können Sie dieses Problem auch umgehen, indem Sie das HTML-Formular folgendermaßen 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 ausdrucken (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 kannst du einfach so etwas tun: 

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

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

Hoffe das hilft!

10
Pierre

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

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

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (In der html4-Spezifikation sind keine Änderungen bezüglich der Verschachtelungsformen von 3.2 bis 4 enthalten.)

https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (In der html4-Spezifikation sind keine Änderungen bezüglich der Verschachtelungsformen von 4.0 auf 4.1 enthalten.)

https://www.w3.org/TR/html5-diff/ (In der html5-Spezifikation sind keine Änderungen bezüglich der Verschachtelungsformen von 4 auf 5 enthalten.)

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

8
Mark Peterson

Eine einfache Problemumgehung besteht darin, einen iframe für das "verschachtelte" Formular zu verwenden. Das Formular ist zwar geschachtelt, befindet sich jedoch auf der Codeseite in einer separaten HTML-Datei.

4
Ezion

Sie haben sogar Probleme damit, sie in verschiedenen Versionen desselben Browsers zum Laufen zu bringen. Also vermeiden Sie das.

2
MP.

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. Also, während Sie es vielleicht schaffen, es zum Laufen zu bringen einige der Zeit, wären Sie sicherlich nicht in der Lage, es alle der Zeit zum Laufen zu bringen.

2
Mike Hofer

Sie können auch formaction = "" innerhalb des button-Tags verwenden.

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

Dies würde im ursprünglichen Formular als separate Schaltfläche verschachtelt. 

2
Chief Buddy

Obwohl ich keine Lösung für geschachtelte Formulare präsentiere (es funktioniert nicht zuverlässig), führe ich eine Problemumgehung aus, die für mich funktioniert:

Nutzungsszenario: Eine Superform, mit der N Elemente gleichzeitig geändert werden können. Am unteren Rand befindet sich die Schaltfläche "Alle senden". Jeder Artikel möchte ein eigenes verschachteltes Formular mit der Schaltfläche "Artikel Nr. Senden". Kann aber nicht ...

In diesem Fall kann man tatsächlich ein einzelnes Formular verwenden, und dann muss der Name der Schaltflächen submit_1..submit_N und submitAll sein und es serverseitig handhaben, indem man nur die mit _1 endenden Parameter betrachtet, wenn der Name der Schaltfläche 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 die Arbeit.

2
Peter V. Mørch

Verwenden Sie ein leeres Formular-Tag vor Ihrem verschachtelten Formular

Getestet und an Firefox gearbeitet, Chrome

Nicht getestet am I.E.

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

Über das Schachteln von Formularen: Ich verbrachte einen Nachmittag 10 Jahre lang damit, ein Ajax-Skript zu debuggen.

meine vorherige Antwort/mein Beispiel hat das HTML-Markup nicht berücksichtigt, 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 konnte nicht sagen, dass ungültig form_2 angegeben wurde.

Als ich den ajaxContainer verlegte, der form_2 <i>outside</i> von form_1 erzeugte, war ich wieder im Geschäft. Es ist die Antwort auf die Frage, warum man Formen verschachteln kann. Ich meine, wirklich, wozu die ID, wenn nicht definiert wird, welches Formular verwendet werden soll? Es muss eine bessere, schlankere Arbeit geben. 

1
larry

Wirklich nicht möglich ....__ Ich konnte keine Form-Tags schachteln ....__ 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 angewendet einige 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
      }
  }
});
0
diogosimao

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

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

Auf diese Weise können Sie Ihre HTML-Datei folgendermaßen 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" form="sub-form" value="Save"/>
    </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 von Microsoft selbst bestätigtes Kompatibilitätswerkzeug: https://www.zdnet.com/article/Microsoft-security -chief-ie-is-nicht-a-browser-so-stop-using-it-as-your-default/ . 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 fehlende Unterstützung für .__ umgehen. verschachtelte Formularelemente.

0
Creative

Obwohl die Frage ziemlich alt ist und ich mit dem @everyone einverstanden bin, ist das Verschachteln von Formularen in HTML nicht zulässig 

Aber dieses Etwas möchte das vielleicht alles sehen

hier können Sie hacken (ich nenne es einen Hack, da ich sicher bin, dass dies nicht legitim ist)

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

0
Viren