web-dev-qa-db-ja.com

HTMLフォームをネストできますか？

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

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

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

htmlnested-forms
410
Levi

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

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

4.10.3 form要素

コンテンツモデル：

フローの内容。ただし、フォーム要素の子孫はありません。

424
Craig

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;
}
86
Vitalii Fedorenko

私は同じような問題に出くわしました、そしてそれが質問への答えではないことを私は知っています、しかしそれはこの種の問題を持つ誰かにとって助けになることができます：
複数の形式の要素を与えられた順序で並べる必要がある場合は、HTML5<input> form属性が解決策になります。

から http://www.w3schools.com/tags/att_input_form.asp ：

  1. FormattributeはHTML 5で新しく追加されました。
  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" />

ここで ブラウザの互換性がわかります。

67
Cliff Burton

プレーン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();
41
user2420019

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

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

29
roufamatic

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

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

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

11
Jonathan Lonowski

投稿されたデータを操作できるようにするサーバーサイドのスクリプト言語を使用している場合、この問題を回避するもう1つの方法は、次のようにHTMLフォームを宣言することです。

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

投稿されたデータを印刷すると（ここではPHPを使用します）、次のような配列が得られます。

//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',
      ),
    );

それからあなたはちょうど何かのようにすることができます：

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

あなたの$ _POSTはあなたの "メインフォーム"データのみを持っています、そしてあなたのサブフォームデータはあなたが自由に操作できる他の変数に格納されています。

お役に立てれば！

10
Pierre

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仕様で指定されていると仮定すべきだと思います:)

8
Mark Peterson

2019年なので、この質問に対する最新の回答をお願いします。入れ子にしなくても入れ子になったフォームと同じ結果を得ることができます。 HTML5はform属性を導入しました。フォームの外にあるフォームコントロールにform属性を追加して、それらを特定のフォーム要素に（idで）リンクすることができます。

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

このようにあなたはこのようにあなたのhtmlを構成することができます：

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

Form属性は最近のすべてのブラウザでサポートされています。 IEはこれをサポートしていませんが、IEはブラウザではなくなり、互換性ツールになりました。Microsoft自身によって確認されています。 https：//www.zdnet。 com/article /マイクロソフトセキュリティチーフ、すなわちブラウザではないので、デフォルトとしてそのまま使用するのはやめてください/ 。 IEで物事を動かすことを気にするのをやめる時が来た。

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

HTMLの仕様から：

この機能により、作成者は入れ子になったフォーム要素のサポートの欠如を回避することができます。

7
Creative

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

4
Ezion

同じブラウザの異なるバージョンで動作させるのに問題があるかもしれません。だからそれを使用しないでください。

2
MP.

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

2
Mike Hofer

Buttonタグ内でformaction = ""を使用することもできます。

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

これは別のボタンとして元のフォームにネストされます。

2
Chief Buddy

ネストされたフォームに対する解決策は提示しませんが（確実には機能しません）、私には有効な回避策を提示します。

使用シナリオ：N個のアイテムを一度に変更できるスーパーフォーム。下部に[すべて送信]ボタンがあります。各アイテムは、 "Submit Item＃N"ボタンを持つそれ自身のネストされたフォームを持ちたいです。しかしできません….

この場合、実際には単一のフォームを使用し、ボタンの名前がsubmit_1である場合にのみsubmit_Nで終わるパラメーターを調べることで、ボタンの名前を_1..submit_1およびsubmitAllにしてサーバー側で処理できます。 。

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

さて、それほど発明ではありませんが、仕事はします。

2
Peter V. Mørch

ネストしたフォームの前に空のフォームタグを使用する

Firefox、Chromeでテストおよび作業済み

I.E.でテストされていません.

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

フォームのネスティングについて：私は午後1年間、ajaxスクリプトをデバッグしようとしました。

私の前の答え/例は、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 <i>outside</i>を生成するajaxContainerを動かしたとき、私は仕事に戻りました。それは、なぜ形を入れ子にすることができるのかという疑問に対する答えです。実際には、どのフォームを使用するかを定義しない場合のIDは何ですか？より良い、よりスリムな回避策があるはずです。

1
larry

本当に不可能です...私はフォームタグをネストすることができませんでした...しかし私はこのコードを使いました：

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

{% csrf_token %}とかを使って

そしていくつかの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

質問はかなり古く、私は@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/

0
Viren