web-dev-qa-db-ja.com

フォーム内のフォーム、それは大丈夫ですか？

別のフォーム内にフォームを配置できるかどうか。それに問題はありますか。

htmlhtml5forms
164
Rajasekar

1つのHTMLページに複数の<form>要素を含めることができますが、それらをネストすることはできません。

208
Oded

フォームのネストは、新しいHTML5 input要素のフォーム属性で実現できます。フォームを構造的にネストするわけではありませんが、入力は独自のフォームであると評価されます。私のテストでは、IE（IE11）を除く3つの主要なブラウザーがこれをサポートしています。フォームのネストの制限は、HTML UI設計の大きな障害でした。

以下にサンプルコードを示します。[保存]ボタンをクリックすると、「2 3成功」が表示されます（元の http://www.impressivewebs.com/html5-form-attribute/ ）：

<form id="saveForm" action="/post/dispatch/save" method="post"></form>
<form id="deleteForm" action="/post/dispatch/delete" method="post"></form>

<div id="toolbar">
    <input type="text" name="foo" form="saveForm" />
    <input type="hidden" value="some_id" form="deleteForm" />
    <input type="text" name="foo2" id="foo2" form="saveForm" value="success" />

    <input type="submit" name="save" value="Save" form="saveForm" onclick="alert(document.getElementById('deleteForm').elements.length + ' ' + document.getElementById('saveForm').elements.length + ' ' + document.getElementById('saveForm').elements['foo2'].value);return false;" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>
93
ilevent

いいえ。HTMLはネストされたフォームを明示的に禁止します。

HTML 5ドラフト から：

コンテンツモデル：フローコンテンツ。ただし、フォーム要素の子孫はありません。

HTML 4.01勧告 から：

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

（-（FORM）セクションに注意してください）。

75
Quentin

ネストされたフォームはサポートされておらず、w3c標準の一部ではありません（多くの人が述べているように）。

ただし、HTML5では、フォームの子孫である必要はありませんが、「form」属性を使用して複数のフォームで送信できる入力のサポートが追加されています。これは、ネストされたフォームを正確に許可しませんが、このメソッドを使用することにより、ネストされたフォームをシミュレートできます。

「フォーム」属性の値はフォームのIDである必要があります。複数のフォームの場合は、フォームIDをスペースで区切ります。

もっと読むことができます こちら

9
user3007766

マスターフォームがあり、「フォームのあるフォーム」を使用するように強制されている場合、次の操作を実行できます。

リンクボタンを送信するフォームポストの例：

フォームの代わりに...入力をdivにラップします：

 <div id="gap_form"><input type="hidden" name="PostVar"/><a id="myLink" href="javascript:Form2.submit()">A Link</a></div>

jsファイル：

$(document).ready(function () {
(function () {
    $('#gap_form').wrap('<form id="Form2" action="http://sitetopostto.com/postpage" method="post" target="_blank"></form>');
})();});

これは、フォーム内のdiv "gap_form"内のすべてを即座にラップし、リンクはそのフォームを送信します。私は今、このページで作業している正確な例を持っています...（私の例では、新しいページにリダイレクトし、そのページでフォームを送信することで同じことを達成できます...

8
Ben Call

はいあります。間違っています。それが間違っているために動作しません。ほとんどのブラウザには1つのフォームしか表示されません。

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

4
AlexanderMP

別の回避策は、独自のフォームを含むモーダルウィンドウを開始することです

4
manuchap

ネストされたフォームを持つ必要があるのは有効なXHTMLではありません。ただし、複数の送信ボタンを使用し、サーバーサイドスクリプトを使用して、ユーザーがクリックしたボタンに応じて異なるコードを実行できます。

3
Martin LeBlanc

このような別のフォーム内にフォームをネストすることはできません

<form name='form1'>
      <form name='form2'>
            //some code here
      </form>
</form>

場合によっては機能しますが、ユニバーサルプラットフォームにはお勧めしません。 1つのフォーム内で多数のSUBMITボタンを使用できますが、ネストされたフォームを適切に管理することはできません。

3
Gautam3164