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

Eine einfache Lösung ist die Verwendung eines iframe, um das "verschachtelte" Formular aufzunehmen. Optisch ist das Formular verschachtelt, aber auf der Codeseite befindet es sich in einer separaten HTML-Datei.

Answer 2

Selbst wenn es in einem Browser funktioniert, gibt es keine Garantie dafür, dass es in allen Browsern gleich gut funktioniert. Während Sie es also vielleicht zum Laufen bringen können einige der Zeit würden Sie sicherlich nicht in der Lage sein, es zum Laufen zu bringen alle der Zeit.

Answer 3

Obwohl die Frage ziemlich alt ist und ich mit @everyone übereinstimme, dass die Verschachtelung von Formularen in HTML nicht erlaubt ist

Aber das ist etwas, das alle sehen wollen

wo man html hacken kann (ich nenne es einen Hack, da ich sicher bin, dass dies nicht legitim ist), um dem Browser zu erlauben, verschachtelte Formulare zu haben

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

Answer 4

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

Verwendungsszenario: Ein Superformular, mit dem N Elemente auf einmal geändert werden können. Es hat eine Schaltfläche "Submit All" am unteren Rand. Jedes Element möchte sein eigenes verschachteltes Formular mit einer Schaltfläche "Element # N einreichen" haben. Kann aber nicht...

In diesem Fall kann man tatsächlich ein einziges Formular verwenden, und die Namen der Schaltflächen lauten submit_1 .. submit_N y submitAll und es serverseitig behandeln, indem nur die Parameter betrachtet werden, die auf _1 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>

Das ist zwar keine besonders gute Erfindung, aber sie erfüllt ihren Zweck.

Answer 5

Verwenden Sie ein leeres Formular-Tag vor Ihrem verschachtelten Formular

Getestet und funktioniert mit Firefox, Chrome

Nicht an I.E. getestet.

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

EDIT by @adusza: Wie die Kommentatoren bemerkten, führt der obige Code nicht zu verschachtelten Formularen. Wenn Sie jedoch div-Elemente wie unten hinzufügen, erhalten Sie subForm innerhalb von mainForm, und das erste leere Formular wird entfernt.

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