別のhtmlフォーム内にhtmlフォームがあることは有効ですか？

331

次のものが有効なhtmlですか？

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

したがって、「b」を送信すると、内部フォーム内のフィールドのみが取得されます。「a」を送信すると、「b」内のフィールドを差し引いたすべてのフィールドが取得されます。

それが不可能な場合、この状況でどのような回避策を利用できますか？

html  web-standards  standards-compliance 
— allyourcode
ソース
28
これは実際にはdbインターフェイスからよく知られている非常に一般的なニーズであるようです-フォームがテーブルAを更新し、そのテーブルにテーブルBにリンクされたフィールドがある場合、そのエントリを更新または作成する方法が必要になることがよくあります現在のフォームを離れることなくリンクされたフィールド。ネストされたサブフォームは、それを行うための非常に直感的な方法です（UIはいくつかのデスクトップデータベースによって実装されます）。
— モノタスカー2012
3
無効です。回避策はありますが、このデータを取得するには別の方法を使用する必要があります。すべてのデータをPHPメールスクリプトに送信し、一部（aの一部）を1つのメールとして送信し、一部（bの一部）を別のメールとして送信する1つのフォームについて考えてみます。またはデータベースに、またはこのデータを使って何をしているか。フォームのネストは可能ですが、それは答えではありません！
2
— ユーザー、
質問は良いですが、提供されたリンクをクリックすることなく、グーグルですばやく検索すると、フォーム内のフォームが有効かどうかがわかります。私は個人的に、@ Andreasの回答が気に入りました。
— ジャレットロイド

回答:

380

A. 有効なHTMLでもXHTMLでもありません

公式のW3C XHTML仕様のセクションB「要素の禁止」には、次のように記載されています。

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

以前のHTML 3.2仕様と同様に、FORMS要素のセクションには次のように記載されています。

「すべてのフォームはFORM要素で囲む必要があります。1つのドキュメントに複数のフォームが含まれる場合がありますが、FORM要素はネストできません。」

B. 回避策

フォームタグをネストせずにJavaScriptを使用する回避策があります。

「ネストされたフォームを作成する方法」（タイトルにもかかわらず、これはされていないフォームタグを入れ子になったが、JavaScriptは回避しました）。

このStackOverflowの質問に対する回答

注： スクリプトを介してDOMを操作することにより、W3Cバリデーターをだましてページを渡すことができますが、それでも正当なHTMLではありません。このようなアプローチを使用する場合の問題は、コードの動作がブラウザー間で保証されないことです。（標準ではないため）

— GeneQ
ソース
4
上記の私のコメントを参照してください....これは素晴らしい答え、すばらしい回避策ですが、ひどい習慣です。すべてのデータをPHPスクリプトに送信し、そこから独自の宛先に分割して送信する手間を省くことで、まったく同じことができます。あなたは素晴らしい質問に答えましたが、より少ない時間で正しい方法でそれを行うことができたので、それは単に悪い、無意味な練習です。
53

誰かがこの投稿をここで見つけた場合、JSを必要としない優れたソリューションです。異なる名前属性の2つの送信ボタンを使用してサーバー言語で確認します。送信ボタンが押されたため、1つだけがサーバーに送信されます。

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

phpを使用する場合、サーバー側は次のようになります。

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
— アンドレアス
ソース
これは同じではありません。この場合、同じページに移動して異なるアクションを実行する必要があります。2つのフォームを使用して、異なるページに移動したり、別の情報を送信したりできます。
— Luis Tellez 2014年
ラッパーとしてphpファイルを使用し、別のファイルにコードが必要な場合は、必要なファイルを含めることができます。したがって、（echo "stored！";）の代わりに（include "a.php";）と書くことができます
— Andreas
フォームに複数の削除ボタンがあります（ネストされたフォームを検討するためにここに来た理由です）。各レコードに1つと、一括削除を実行するためのそれぞれのリストチェックボックス。あなたの返答は私に私の計画を再考するよう促しました。今度は数字のIDを使用して個々の削除のボタンに名前を付け、そのように一括削除する必要があると考えています。Ilはphpにソートを行わせます。
— Chris
@Andreasはお金です。これは、フォーム入力の解釈方法を変えるための自然な解決策です。Post / Redirect / Getを使用する場合、宛先も異なる可能性があります。ただし、サーバー側でアクションを1つの「aORb」エンドポイントに組み合わせる柔軟性がない場合は、恐らくハックに悩まされていると思います。
27

HTML 4.xとHTML5ではネストされたフォームは許可されていませんが、HTML5では「フォーム」属性（「フォームオーナー」）による回避策が許可されます。

HTML 4.xに関しては、次のことができます。

  1. 非表示フィールドとJavaScriptのみを含む追加のフォームを使用して、入力を設定し、フォームを送信します。
  2. CSSを使用して複数のHTMLフォームを1つのエンティティのように配置しますが、それは難しいと思います。
— 西
ソース
1
なぜこれが反対票が投じられたのかわかりません。ここでは、フォームの所有者のW3Cセクションへのリンク：w3.org/TR/html5/...
— SooDesuNe
5
@SooDesuNeリンクが古くなっています。新しいものを次に示しますw3.org/TR/html5/forms.html#form-owner
— chiliNUT
13

他の人が言ったように、それは有効なHTMLではありません。

フォームを相互に視覚的に配置するためにこれを行っているようです。その場合は、2つの別個のフォームを実行し、CSSを使用してそれらを配置します。

— user64075
ソース
1
これは私が自分のウェブサイトに必要だと思っていたものですが、これを行う方法の例が大好きです。
— ブライアンピーターソン
5

HTMLコードをW3 Validatorに入力することで、ご自身の質問に非常に簡単に答えることができます。（テキスト入力フィールドが特徴で、サーバーにコードを配置する必要さえありません...）

（そして、いいえ、それは検証されません。）

— クリスチャン・スタダー
ソース
5

むしろ、フォームのaction属性内でカスタムjavascript-methodを使用してください！

例えば

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>
— アンドレアスニーダーメア
ソース
5

可能性としては、外側のフォームの中にiframeを含めることです。iframeには内部フォームが含まれています。<base target="_parent" />フォームをメインページの一部として動作させるには、必ずiframeのheadタグ内のタグを使用してください。

— ロビン・マノリ
ソース
1

いいえ、無効です。しかし、「ソリューション」は、フォーム「b」を含むフォーム「a」の外側にモーダルウィンドウを作成する場合があります。

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

ブートストラップまたはcssを使用している場合は、簡単に実行できます。iframeの使用を避けるためにこれを行っています。

— ジョナサス・ホルテンス
ソース
0

フォームタグをネストするためのJavaScript以外の回避策：

あなたができるので

すべてのフィールドから「b」内のフィールドを差し引いたもの。

"a"を送信するとき、派手なJavaScriptトリックのない通常のWebフォームを使用して、以下が機能します。

手順1.各フォームを独自のWebページに配置します。

手順2.このサブフォームを表示する場所にiframeを挿入します。

ステップ3.利益。

コードプレイグラウンドのWebサイトを使用してデモを表示しようとしましたが、その多くは、自分のドメイン内であっても、Webサイトをiframeに埋め込むことを禁止しています。

— ADJenks
ソース
-1

1：Mリレーショナルデータベースにデータを送信/コミットするフォームが必要な場合は、テーブルBに必要なデータを挿入する「挿入後」のDBトリガーをテーブルAに作成することをお勧めします。

— cbWrites
ソース
-2

いいえ、それは有効ではありませんが、あなたは上のあなたの内側のフォームの位置をだますことができますHTMLの助けを借りてCSS、およびjQuery使用方法。最初に親フォーム内にコンテナーdivを作成し、次にページの他の場所に子（内部）フォームを持つdivを作成します。

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

コンテナーdivに安定した高さを与える

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

コンテナーdivに対して「other_form」の位置をだましてください。

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS：見栄えを良くするには、数字をいじる必要があります。

— ヤロスラフ・バルホル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.