web-dev-qa-db-ja.com

同じ名前の複数の非表示コントロール要素を持つHTMLフォーム

同じ名前の「隠された」コントロール要素が複数あるHTMLフォームを持つことは合法ですか？サーバーでこれらすべての要素の値を取得する予定です。合法である場合、主要なブラウザは動作を正しく実装していますか？

formshidden-field
48
Brian

ブラウザはそれで問題ありません。ただし、アプリケーションライブラリによる解析方法は異なる場合があります。

プログラムは、同じ名前のアイテムをグループ化するためにsupposedです。 HTML仕様はこれを明示的に述べていませんが、暗黙的に チェックボックスに関するドキュメント で述べられています：

フォーム内のいくつかのチェックボックスは、同じコントロール名を共有する場合があります。したがって、たとえば、チェックボックスを使用すると、ユーザーは同じプロパティに対して複数の値を選択できます。

36
Powerlord

サーバー側のテクノロジーはさまざまです。 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'] }
26
Sampson

このようなものがある場合：

<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...のようになります。クエリ文字列の解析に使用しているサーバーソフトウェアによっては、これがうまく機能しない場合があります。

19
DavGarcia

はい。ほとんどのアプリケーションサーバーは一致する要素を収集し、次のようなフォームのようにコンマで連結します。

<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=

...そして、次のようなコードで公開されます：（たとえば、Response.Write（Request.QueryString（ "myHidden"））のようなものに従ってください）：

1、2、3

そのため、値を取得するには、文字列を分割し、配列（または選択した言語で同等のもの）としてアクセスします。

（明確にする必要があります：PHPでは、少し異なります（Johnathanが指摘しているように、ブラケット表記は項目を配列としてPHPコード）に公開しますが、ASP、ASP.NET、およびColdFusionはすべて値をコンマ区切りのリストとして公開します。したがって、はい、重複した命名は完全に有効です。）

5
Christian Nunciato

HTML5

非規範セクション 4.10.1.3サーバーと通信するためのフォームの構成 は、それが有効であることを明示的に示しています。

複数のコントロールに同じ名前を付けることができます。たとえば、ここではすべてのチェックボックスに同じ名前を付け、サーバーはチェックボックスがチェックされたかどうかをその名前で送信される値を見ることで区別します。ラジオボタンのように、value属性で一意の値も与えられます。

これの規範的なバージョンは、どこでも禁止されていないということであり、フォーム送信アルゴリズムは、どのリクエストを生成する必要があるかを正確に示しています。

2
Ciro Santilli 新疆改造中心996ICU六四事件

特に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
)

これがいくつかの助けになることを願っています。

2
Melo Waste

少なくともラジオボタンとチェックボックスの場合、それは合法だと思います。 XSLTでテキストボックス入力を動的に追加する必要がある場合、それらにすべて同じ名前を付けます。 ASP.NETでは、Request.Form ["whatever_name"]はこれらすべての値をコンマで区切った文字列です。

0
CaptainJanuary

イギリス、スコットランド、ウェールズ、アイルランドの各郡がすべて同じパラメーターの値として渡されるように、複数のSELECT入力に同じコントロール名、counties []を使用してみました。 PHPはそれをうまく処理しますが、HTMLバリデーターは警告を出します。すべてのブラウザーがこれを同じ方法で処理するかどうかはわかりません。

0
Nick Iredale