Können Sie HTML-Formulare verschachteln?

Question

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

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

so dass beide Formen funktionieren? Mein Freund hat Probleme damit, ein Teil der subForm funktioniert, während ein anderer Teil nicht funktioniert.

Answer 1

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

Von der html5-Arbeitsentwurf :

4.10.3 Die form Element

Inhaltliches Modell:

Flow-Inhalt, aber ohne Formularelement-Nachfolger.

Answer 2

El HTML5 <input> form Attribut kann 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, welche <form> Element an <input> Element gehört. Der Wert dieses Attributs muss das id-Attribut eines <form> Element in demselben Dokument.

Szenario :

• Eingabe_Form1_n1
• Eingabe_Form2_n1
• Eingabe_Form1_n2
• Eingabe_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 die Kompatibilität der Browser.

Answer 3

Es ist möglich um das gleiche Ergebnis wie bei verschachtelten Formularen zu erzielen, ohne sie jedoch zu verschachteln.

Mit HTML5 wurde das Formularattribut eingeführt. Sie können das form-Attribut zu 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 Ihre html-Datei 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. Der IE unterstützt es zwar nicht, aber der IE ist kein Browser mehr, sondern ein Kompatibilitätstool, wie von Microsoft selbst bestätigt wurde: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/ . Es ist an der Zeit, dass wir aufhören, uns darum zu 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:

Diese Funktion ermöglicht es den Autoren, die fehlende Unterstützung für verschachtelte Formularelemente zu umgehen.

Answer 4

Die zweite Form wird ignoriert, siehe die Schnipsel zum Beispiel von 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;
}

Answer 5

Mit einfachem HTML ist dies nicht möglich. Aber mit Javascript können Sie das 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 Elemente zu serialisieren, die Sie übermitteln möchten.

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

Dann in Ihrem Javascript könnten Sie dies tun, um class1 Elemente zu serialisieren

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

Für Klasse 2 könnten Sie Folgendes tun

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

Für das gesamte Formular

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

oder einfach

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