515

このようなhtmlフォームをネストすることは可能ですか

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

両方の形式が機能するように？私の友人は、作品の一部に問題を抱えていますが、subForm別の部分には問題がありません。

4

21 に答える 21

511

一言で言えば、いいえ。1 つのページに複数のフォームを含めることができますが、入れ子にしないでください。

html5ワーキングドラフトから：

4.10.3form要素

コンテンツ モデル:

コンテンツをフローしますが、フォーム要素の子孫はありません。

于 2008-12-18T22:57:50.780 に答える
152

HTML5 <input> form属性が解決策になる可能性があります。http://www.w3schools.com/tags/att_input_form.asp

から:

  1. form属性は HTML5 で新しく追加されました。
  2. 要素が属する<form>要素を指定します。<input>この属性の値は<form>、同じドキュメント内の要素の id 属性である必要があります。

シナリオ:

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_Form2_n2

実装:

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

ここでは、ブラウザの互換性を確認できます。

于 2015-02-15T16:37:01.363 に答える
92

2 番目のフォームは無視されます。たとえば、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;
}
于 2012-02-15T13:57:19.213 に答える
44

プレーンな html では、これを行うことはできません。しかし、javascript を使えばそれが可能です。javascript/jquery を使用している場合は、フォーム要素をクラスで分類し、serialize() を使用して、送信するアイテムのサブセットのフォーム要素のみをシリアル化できます。

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

次に、JavaScriptでこれを実行して、class1要素をシリアル化できます

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

class2 の場合、次のことができます

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

フォーム全体に

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

または単に

$("#formid").submit();
于 2013-05-25T10:10:21.137 に答える
32

AngularJS を使用している場合、<form>内部のタグはすべて、実行時に入れ子になるように設計されたディレクティブにng-app置き換えられます。ngForm

Angular フォームではネストできます。これは、すべての子フォームも有効な場合に、外側のフォームが有効であることを意味します。<form>ただし、ブラウザは要素のネストを許可していないため、Angular は と同じように動作するがネストできるngFormディレクティブを提供します。<form>これにより、ネストされたフォームを持つことができます。これは、ディレクティブを使用して動的に生成されるフォームで Angular 検証ディレクティブを使用する場合に非常に便利ですngRepeat。（ソース）

于 2014-10-31T19:01:37.523 に答える
12

クレイグが言ったように、いいえ。

しかし、理由についてのあなたのコメントに関して：

<form>入力と「更新」ボタンで 1 を使用し、別の で「注文を送信」ボタンで非表示の入力をコピーして使用する方が簡単かもしれません<form>。

于 2008-12-18T23:01:58.977 に答える
9

FORM 要素をネストすることは許可されていないことに注意してください。

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (html4 仕様では、3.2 から 4 へのネストフォームに関する変更はありません)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (html4 仕様では、4.0 から 4.1 へのネスト フォームに関する変更はありません)

https://www.w3.org/TR/html5-diff/ (html5 仕様では、フォーム 4 から 5 へのネストに関する変更はありません)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-formsは、「この機能により、作成者はネストされたフォーム要素のサポートの欠如を回避できます。」とコメントしていますが、これが指定されている場所を引用しないでください。html3仕様で指定されていると想定する必要があると想定していると思います:)

于 2012-07-11T19:55:56.790 に答える
5

簡単な回避策は、iframe を使用して「ネストされた」フォームを保持することです。視覚的にはフォームはネストされていますが、コード側では完全に別の html ファイルになっています。

于 2013-09-30T06:43:37.957 に答える
3

1つのブラウザで動作させることができたとしても、すべてのブラウザで同じように動作するという保証はありません。したがって、いつかは動作させることができるかもしれませんが、常に動作させることはできません。

于 2008-12-18T23:38:53.800 に答える
3

ネストされたフォームの解決策は提示しませんが (確実には機能しません)、私にとって有効な回避策を提示します。

使用シナリオ: 一度に N 個のアイテムを変更できるスーパーフォーム。下部に「すべて送信」ボタンがあります。各アイテムには、「Submit Item # N」ボタンを備えた独自のネストされたフォームが必要です。しかし、できません...

この場合、実際には 1 つのフォームを使用し、ボタンの名前をsubmit_1..submit_NにしsubmitAllて、サーバー側で処理できます。ボタンの名前_1が..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>

わかりました、それほど発明ではありませんが、それは仕事をします.

于 2016-01-22T09:41:39.987 に答える
2

フォームのネストについて: ある日の午後、ajax スクリプトのデバッグに 10 年間費やしました。

私の以前の回答/例は、html マークアップを考慮していませんでした。申し訳ありません。

<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 は無効な form_2 と言って常に失敗しました。

form_1 のform_2 を生成した ajaxContainer を移動したところ、元<i>outside</i>に戻りました。なぜフォームをネストするのかという質問に答えます。つまり、使用するフォームを定義しない場合の ID は何ですか? より優れた、より洗練された回避策が必要です。

于 2012-10-09T22:01:46.500 に答える
2

質問はかなり古いですが、フォームのネストはHTMLでは許可されていないという@everyoneに同意します

しかし、これは誰もがこれを見たいと思うかもしれません

ブラウザがネストされたフォームを持つことを許可するためのhtmlをハックできる場所（これは正当ではないと確信しているので、ハックと呼んでいます）

<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フィドルリンク

http://jsfiddle.net/nzkEw/10/

于 2014-05-26T15:32:59.853 に答える