web-dev-qa-db-ja.com

HTMLフォームを別のHTMLフォーム内に含めることは有効ですか。

以下のものが有効なHTMLです。

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

したがって、 "b"を送信すると、内側のフォーム内のフィールドしか取得できません。 "a"を送信すると、すべてのフィールドから "b"内のフィールドを除いたものが表示されます。

それが不可能な場合は、この状況に対してどのような回避策がありますか？

htmlweb-standardsstandards-compliance
296
FlyByQuestionGuy

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

公式のW3C XHTML仕様書のセクションB「要素の禁止」では、次のように述べられています。

"form must not contain other form elements."

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

より古い HTML 3.2 spec に関しては、FORMS要素に関する節は次のように述べています。

「すべてのフォームはFORM要素で囲む必要があります。単一の文書に複数のフォームを含めることができますが、FORM要素をネストすることはできません。」

B.回避策

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

「入れ子になったフォームの作成方法」（タイトルにもかかわらず、これはではありませんが、入れ子になったフォームタグはではありませんが、 JavaScriptの回避策）。

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

注：スクリプトを使ってDOMを操作してページを渡すようにW3C Validatorsをトリックすることはできますが、それでもまだ合法的なHTMLではありません。そのようなアプローチを使用することの問題点は、あなたのコードの振る舞いがブラウザ間で保証されないことです。 （標準ではないので）

344
GeneQ

誰かがここにこの記事を見つけた場合JSの必要性なしですばらしい解決策です。異なる名前属性を持つ2つの送信ボタンを使用して、サーバー言語でチェックしてください。どちらの送信ボタンが押されたのか、どちらか一方のみがサーバーに送信されます。

<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!";
?>
48
Andreas

HTML 4.xとHTML 5ではネストされたフォームは許可されませんが、HTML 5では "form"属性（ "form owner"）を使用した回避策が可能になります。

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

  1. 隠しフィールドとJavaScriptのみを含む追加のフォームを使用して入力を設定し、フォームを送信します。
  2. CSSを使用して複数のHTMLフォームを並べて単一のエンティティのように見せることができますが、それは難しいと思います。
24
Nishi

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

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

13
user64075

いいえ、HTML仕様では、FORM要素に別のFORM要素を含めることはできないと規定されています。

7
David Grant

むしろ、フォームの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>
6
Andreas Niedermair

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

5
Robin Manoli

いいえ、 w3c を参照

5
tliff

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

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

5
Christian Studer

いいえ、無効です。しかし、「解決策」は、フォーム「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>

あなたがブートストラップやmaterialize cssを使っているなら、それは簡単にできます。私はiframeを使わないようにこれをやっています。

2
Jonathas Hortense

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

1
cbWrites