同じ名前の複数の非表示コントロール要素を持つHTMLフォーム
-
19-08-2019 - |
質問
複数の<!> quot; hidden <!> quot;を持つHTMLフォームを持つことは合法ですか?同じ名前の制御要素?これらすべての要素の値をサーバーで取得する予定です。正当な場合、主要なブラウザは動作を正しく実装していますか?
解決
ブラウザは問題ありません。ただし、アプリケーションライブラリによる解析方法は異なる場合があります。
プログラムは、同じ名前のアイテムをグループ化するために想定されています。 HTML仕様ではこれを明示的に述べていませんが、チェックボックスに関するドキュメント:
フォーム内のいくつかのチェックボックスは共有できます 同じコントロール名。したがって、 たとえば、チェックボックスを使用すると、ユーザーは 同じ値を複数選択します プロパティ。
他のヒント
異なるサーバー側のテクノロジーは異なります。 PHPでは、名前に配列スタイルの構文を使用して、サーバー側でコレクションを強制的に作成できます。サーバーにポストされる場合、$_POST['colors']
は2つの値#003366
および#00FFFF
:
<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />
一般的には、角括弧なしの標準の name を使用する必要があります。ほとんどのサーバー側の技術は、結果のデータを解析し、ある種のコレクションを提供できます。 Node.jsは querystring.parse
:
const querystring = require('querystring')
querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }
次のようなものがある場合:
<input type="hidden" name="x" value="1" />
<input type="hidden" name="x" value="2" />
<input type="hidden" name="x" value="3" />
クエリ文字列はx=1&x=2&x=3
...のようになります...クエリ文字列の解析に使用しているサーバーソフトウェアによっては、これがうまく機能しない場合があります。
はい、ほとんどのアプリケーションサーバーは一致する要素を収集し、次のようなフォームのようにコンマで連結します:
<html>
<form method="get" action="http://myhost.com/myscript/test.asp">
<input type="hidden" name="myHidden" value="1">
<input type="hidden" name="myHidden" value="2">
<input type="hidden" name="myHidden" value="3">
<input type="submit" value="Submit">
</form>
</html>
...は、次のようなURLに解決されます(GETの場合-POSTは同じように機能します):
http://myhost.com /myscript.asp?myHidden=1&myHidden=2&myHidden=3
...そして、次のようなコードで公開されます:(たとえば、Response.Write(Request.QueryString(<!> quot; myHidden <!> quot;))のようなものに従う:)
1、2、3
したがって、値を取得するには、文字列を分割し、配列(または選択した言語で同等のもの)としてアクセスします。
(明確にする必要があります:PHPでは、わずかに異なります(Johnathanが指摘しているように、ブラケット表記は項目をPHPコードの配列として公開します)が、ASP、ASP.NET、およびColdFusionはすべて値をコンマとして公開します-分離リスト。したがって、はい、重複した命名は完全に有効です。)
HTML5
非規範的セクション 4.10.1.3サーバーと通信するためのフォームの構成は、それが有効であることを明示的に言っています:
複数のコントロールに同じ名前を付けることができます。たとえば、ここではすべてのチェックボックスに同じ名前を付け、サーバーは、その名前で送信される値を確認することで、チェックボックスがチェックされたことを区別します<!>#8212;ラジオボタンと同様に、value属性で一意の値が与えられます。
これの規範的なバージョンは、それがどこでも禁止されていないことであり、フォーム送信アルゴリズムは正確にどのリクエストが生成されるべきかを述べています:
- 制約違反なし: https://www.w3.org/TR /html5/forms.html#constraints
- 複数の名前が<!> quot; form data set <!> quot;に追加されます。次から次へ: https://www.w3。 org / TR / html5 / forms.html#constructing-form-data-set
-
application/x-www-form-urlencoded
などのエンコーディングは、<!> quot; form data set <!> quot;をループします。複数のkey=val
https:// wwwを吐き出します。 w3.org/TR/html5/forms.html#url-encoded-form-data
特にPHPの場合、非表示の入力に配列名を使用していくつかのテストを行い、ここで結果を共有します:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Post Hidden 2D Arrays</title>
</head>
<body>
<form name="formtest" method="POST" target="_self">
<input type="hidden" name="elem['name'][]" value="first">
<input type="hidden" name="elem['name'][]" value="second">
<input type="hidden" name="elem['name'][]" value="third">
<input type="hidden" name="elem['name'][]" value="fourth">
<input type="hidden" name="elem['type'][]" value="normal">
<input type="hidden" name="elem['type'][]" value="classic">
<input type="hidden" name="elem['type'][]" value="regular">
<input type="hidden" name="elem['type'][]" value="basic">
<input type="hidden" name="elem['size'][]" value="4">
<input type="hidden" name="elem['size'][]" value="7">
<input type="hidden" name="elem['size'][]" value="3">
<input type="hidden" name="elem['size'][]" value="6">
<input type="hidden" name="elem['form'][]" value="triangle">
<input type="hidden" name="elem['form'][]" value="square">
<input type="hidden" name="elem['form'][]" value="hexagon">
<input type="hidden" name="elem['form'][]" value="circle">
<input type="submit" name="sendtest" value="Test">
</form>
<xmp>
<?php
print_r($_POST);
?>
</xmp>
</body>
</html>
フォームを送信すると、次の結果が生成されます。
Array
(
[elem] => Array
(
['name'] => Array
(
[0] => first
[1] => second
[2] => third
[3] => fourth
)
['type'] => Array
(
[0] => normal
[1] => classic
[2] => regular
[3] => basic
)
['size'] => Array
(
[0] => 4
[1] => 7
[2] => 3
[3] => 6
)
['temp'] => Array
(
[0] => triangle
[1] => square
[2] => hexagon
[3] => circle
)
)
[sendtest] => Test
)
この結果を確認した後、配列値のより良い配置を探してさらにテストを行い、これで終了しました(新しい非表示の入力のみを表示します):
<input type="hidden" name="elem[0]['name']" value="first">
<input type="hidden" name="elem[1]['name']" value="second">
<input type="hidden" name="elem[2]['name']" value="third">
<input type="hidden" name="elem[3]['name']" value="fourth">
<input type="hidden" name="elem[0]['type']" value="normal">
<input type="hidden" name="elem[1]['type']" value="classic">
<input type="hidden" name="elem[2]['type']" value="regular">
<input type="hidden" name="elem[3]['type']" value="basic">
<input type="hidden" name="elem[0]['size']" value="4">
<input type="hidden" name="elem[1]['size']" value="7">
<input type="hidden" name="elem[2]['size']" value="3">
<input type="hidden" name="elem[3]['size']" value="6">
<input type="hidden" name="elem[0]['temp']" value="triangle">
<input type="hidden" name="elem[1]['temp']" value="square">
<input type="hidden" name="elem[2]['temp']" value="hexagon">
<input type="hidden" name="elem[3]['temp']" value="circle">
フォームの送信後にこの結果を取得する:
Array
(
[elem] => Array
(
[0] => Array
(
['name'] => first
['type'] => normal
['size'] => 4
['temp'] => triangle
)
[1] => Array
(
['name'] => second
['type'] => classic
['size'] => 7
['temp'] => square
)
[2] => Array
(
['name'] => third
['type'] => regular
['size'] => 3
['temp'] => hexagon
)
[3] => Array
(
['name'] => fourth
['type'] => basic
['size'] => 6
['temp'] => circle
)
)
[sendtest] => Test
)
これがいくつかの助けになることを願っています。
少なくともラジオボタンとチェックボックスの場合、それは合法だと思います。 XSLTでテキストボックス入力を動的に追加する必要がある場合、それらにすべて同じ名前を付けます。 ASP.NETでは、Request.Form [<!> quot; whatever_name <!> quot;]は、これらすべての値をコンマで区切った文字列です。
複数のSELECT入力に同じコントロール名、counties []を使用してみました。これにより、イングランド、スコットランド、ウェールズ、アイルランドの各郡がすべて同じパラメーターの値として渡されます。 PHPはそれをうまく処理しますが、HTMLバリデーターは警告を出します。すべてのブラウザーがこれを同じ方法で処理するかどうかはわかりません。