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

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

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

両方のフォームが機能するように？私の友人はこれに問題を抱えています、subFormそれは作品の一部ですが、別の部分はそうではありません。

つまり、いいえ。1つのページに複数のフォームを含めることができますが、それらをネストすることはできません。

HTML5のワーキングドラフト：

4.10.3 form要素

コンテンツモデル：

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

私は同様の問題に遭遇しました、そしてそれが質問への答えではないことを知っています、しかしそれはこの種の問題を持つ誰かにとって助けになるかもしれません：
2つ以上のフォームの要素を与えられたシーケンスに置く必要がある場合、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" />

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

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

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

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

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

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/microsoft-security-chief-ie-is-not-a -browser-so-stop-using-it-as-your-default /。そろそろIEで物事を機能させることについて気にするのをやめる時が来ました。

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

HTML仕様から：

この機能により、作成者はフォーム要素のネストがサポートされていない状態を回避できます。

この問題を回避するもう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には「メインフォーム」データのみが含まれ、サブフォームデータは、自由に操作できる別の変数に格納されます。

お役に立てれば！

クレイグが言ったように、違います。

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

<form>入力と[更新]ボタンで1を使用し、別のの[注文を送信]ボタンで非表示の入力をコピーする方が簡単な場合があります<form>。

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

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

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

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

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

1つのブラウザーで機能するようにできたとしても、すべてのブラウザーで同じように機能するという保証はありません。あなたはそれが仕事を得ることができるかもしれませんしながら、だから、いくつかの時間を、あなたは確かにそれが仕事を得ることができないだろう、すべての時間のを。

同じブラウザーの異なるバージョンで機能させるのに問題が発生することもあります。したがって、それを使用しないでください。

入れ子になったフォームの解決策は提示しませんが（確実に機能しない）、私にとっては有効な回避策を提示します。

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

この場合、1は、実際には単一のフォームを使用して、ボタンの名前があることができsubmit_1... submit_NとsubmitAllだけで終わるのparamsを見ることで、サーバ側にし、それを処理_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>

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

フォームのネストについて：私は1日の午後に10年かけて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を生成するajaxContainerを移動したとき<i>outside</i>、私は仕事に戻っていました。なぜフォームをネストするのかという疑問に対する答えです。つまり、実際には、使用するフォームを定義しない場合のIDは何ですか？より良い、よりスマートな回避策が必要です。

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

Firefox、Chromeでテストおよび動作

IEでテストされていません

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

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

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

あなたがハッキングできる場所（私はこれをハックと呼んでいるので、これは正当ではないと確信しています）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 FIDDLE LINK

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

いいえ、フォームをネストすることはできません。代わりに、フォームを含むモーダルを開いて、Ajaxフォーム送信を実行できます。

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

<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
      }
  }
});

今日、私も同じ問題で行き詰まり、ユーザーコントロールを追加した問題を解決し、
このコントロールでこのコードを使用します

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

ページのPreRenderCompleteイベントでこのメソッドを呼び出します

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

これは役立つと思います。

私がこれを行うべきではないと気付く前に、複数の送信ボタンを持つためにフォームをネストしていました。その方法で18か月間、数千のサインアップトランザクションを実行しましたが、誰も問題について電話していませんでした。

ネストされたフォームにより、正しいアクションを実行するために解析するIDが提供されました。ボタンの1つにフィールドをアタッチしようとして、Validateが文句を言うまでは壊れませんでした。もつれを解くのは大したことではありませんでした。外部フォームで明示的な文字列化を使用したので、送信やフォームが一致しなくてもかまいません。ええ、そう、ボタンを送信からオンクリックに移すべきだった。

ポイントは、それが完全に壊れていない状況があることです。しかし、「完全に壊れているわけではない」というのは、おそらく標準としては低すぎて、:-)を狙うことができない