同じ名前の「隠し」コントロール要素を複数含む HTML フォームを使用することは合法ですか? サーバーでこれらすべての要素の値を取得することを期待しています。合法である場合、主要なブラウザはその動作を正しく実装していますか?
8 に答える
ブラウザはそれで大丈夫です。ただし、アプリケーションライブラリがそれを解析する方法は異なる場合があります。
プログラムは、同じ名前のアイテムをグループ化することになっています。HTML仕様ではこれを明示的には述べていませんが、チェックボックスのドキュメントに暗黙的に記載されています。
フォーム内の複数のチェックボックスが同じコントロール名を共有する場合があります。したがって、たとえば、チェックボックスを使用すると、ユーザーは同じプロパティに対して複数の値を選択できます。
サーバー側のテクノロジはさまざまです。PHP では、名前に配列スタイルの構文を使用して、サーバー側でコレクションを強制的に作成できます。サーバーに投稿された場合、$_POST['colors']
は 2 つの値を持つ配列になり#003366
ます#00FFFF
。
<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />
一般的に言えば、角かっこのない標準名を使用する必要があります。ほとんどのサーバー側のテクノロジは、結果のデータを解析し、何らかのタイプのコレクションを提供できます。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( "myHidden"))のようなものに従う):
1、2、3
したがって、値を取得するには、文字列を分割して配列(または選択した言語で同等のもの)としてアクセスします。
(明確にする必要があります:PHPでは、わずかに異なります(Johnathanが指摘しているように、角かっこ表記はアイテムをPHPコードの配列として公開します)が、ASP、ASP.NET、ColdFusionはすべて値をコンマ区切りのリストとして公開します。そうです、重複した命名は完全に有効です。)
特に 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["whatever_name"] は、これらすべての値をカンマで区切った文字列です。