带有多个同名隐藏控件元素的HTML表单

时间:2022-04-03 16:51:44

Is it legal to have an HTML form with more than one "hidden" control element with the same name? I expect to get the values of all of these elements at the server. If it is legal, do the major browsers implement the behavior correctly?

拥有一个具有多个具有相同名称的“隐藏”控件元素的HTML表单是否合法?我希望在服务器上获取所有这些元素的值。如果是合法的,主流浏览器是否正确实现了行为?

8 个解决方案

#1


The browsers are OK with it. However, how the application library parses it may vary.

浏览器没问题。但是,应用程序库如何解析它可能会有所不同。

Programs are supposed to group identically named items together. While the HTML specification doesn't explicitly say this, it is implicitly stated in the documentation on checkboxes:

程序应该将具有相同名称的项组合在一起。虽然HTML规范没有明确说明这一点,但是在复选框的文档中隐含地说明了这一点:

Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property.

表单中的几个复选框可以共享相同的控件名称。因此,例如,复选框允许用户为同一属性选择多个值。

#2


Different server-side technologies will vary. With PHP, you can use an array-style syntax for the name to force a collection to be created on the server-end. If posted to the server, $_POST['colors'] will be an array with two values, #003366 and #00FFFF:

不同的服务器端技术会有所不同。使用PHP,您可以使用数组样式语法来强制在服务器端创建集合。如果发布到服务器,$ _POST ['colors']将是一个包含两个值#003366和#00FFFF的数组:

<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />

Generally speaking, you'll want to use a standard name without square brackets. Most server-side technologies will be able to parse the resulting data, and provide a collection of some type. Node.js provides helpful functionality via querystring.parse:

一般来说,您需要使用不带方括号的标准名称。大多数服务器端技术将能够解析结果数据,并提供某种类型的集合。 Node.js通过querystring.parse提供有用的功能:

const querystring = require('querystring')

querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }

#3


If you have something like this:

如果您有这样的事情:

<input type="hidden" name="x" value="1" />
<input type="hidden" name="x" value="2" />
<input type="hidden" name="x" value="3" />

Your query string is going to turn out looking like x=1&x=2&x=3... Depending on the server software you are using to parse the query string this might not work well.

您的查询字符串将看起来像x = 1&x = 2&x = 3 ...根据您用来解析查询字符串的服务器软件,这可能无法正常工作。

#4


Yes, and most application servers will collect the matching elements and concatenate them with commas, such that a form like this:

是的,大多数应用程序服务器将收集匹配的元素并用逗号连接它们,这样的形式如下:

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

... would resolve to a URL (in the GET case -- POST would work the same way, though) like this:

...将解析为URL(在GET情况下 - POST将以相同的方式工作),如下所示:

http://myhost.com/myscript.asp?myHidden=1&myHidden=2&myHidden=3

... and would be exposed to you in code like this: (e.g., following something like Response.Write(Request.QueryString("myHidden")):

...并且会在这样的代码中暴露给你:(例如,像Response.Write(Request.QueryString(“myHidden”))之类的东西:

1, 2, 3

1,2,3

So to grab the values, you'd just split the string and access them as an array (or whatever's comparable in your language of choice).

因此,要获取值,您只需拆分字符串并将其作为数组访问(或者使用您选择的语言进行比较)。

(Should be clarified: In PHP, it's slightly different (as Johnathan points out, bracket notation exposes the items as an array to your PHP code), but ASP, ASP.NET and CF all expose the values as a comma-separated list. So yes, the duplicate naming is completely valid.)

(应该澄清一下:在PHP中,它略有不同(正如Johnathan指出的那样,括号表示法将项目作为数组公开给你的PHP代码),但ASP,ASP.NET和CF都将这些值公开为以逗号分隔的列表。所以是的,重复的命名是完全有效的。)

#5


HTML5

The non-normative section 4.10.1.3 Configuring a form to communicate with a server explicitly says that it is valid:

非规范性部分4.10.1.3配置表单与服务器通信明确表示它是有效的:

Multiple controls can have the same name; for example, here we give all the checkboxes the same name, and the server distinguishes which checkbox was checked by seeing which values are submitted with that name — like the radio buttons, they are also given unique values with the value attribute.

多个控件可以具有相同的名称;例如,这里我们给所有复选框命名相同,服务器通过查看使用该名称提交的值来区分检查哪个复选框 - 就像单选按钮一样,它们也被赋予带value属性的唯一值。

The normative version of this is simply that it is not forbidden anywhere, and the form submission algorithm says exactly what request should be generated:

规范化版本只是在任何地方都不被禁止,表单提交算法确切地说明应该生成什么请求:

#6


Specifically for php I made some tests with array names in hidden inputs and I share here my results:

特别是对于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>

Submitting the form generates the next result:

提交表单会生成下一个结果:

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
)

After viewing this result I made more tests looking a better arrange of array values and ended with this (I will show only the new hidden inputs):

在查看了这个结果之后,我做了更多测试,寻找更好的数组值排列并以此结束(我将只显示新的隐藏输入):

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

obtaining this result after submitting form:

提交表格后获得此结果:

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
)

I hope this helps a few.

我希望这会有所帮助。

#7


I believe it is legal, at least in cases of radio buttons and check boxes. When I have to dynamically add textbox inputs in XSLT, I give them all the same name; in ASP.NET, Request.Form["whatever_name"] is a string of all these values comma-seperated.

我认为这是合法的,至少在收音机按钮和复选框的情况下。当我必须在XSLT中动态添加文本框输入时,我给它们所有相同的名称;在ASP.NET中,Request.Form [“whatever_name”]是一个以逗号分隔的所有这些值的字符串。

#8


I have just tried using the same control name, counties[] for several SELECT inputs so that counties in England, Scotland, Wales and Ireland in each are are all passed as values for the same parameter. PHP handles it fine, but HTML validator gives a warning. I don't know if all browsers would handle this the same way.

我刚刚尝试使用相同的控件名称,counties []用于几个SELECT输入,以便英格兰,苏格兰,威尔士和爱尔兰各县的所有县都作为相同参数的值传递。 PHP处理得很好,但HTML验证器会发出警告。我不知道所有浏览器是否都会以同样的方式处理这个问题。

#1


The browsers are OK with it. However, how the application library parses it may vary.

浏览器没问题。但是,应用程序库如何解析它可能会有所不同。

Programs are supposed to group identically named items together. While the HTML specification doesn't explicitly say this, it is implicitly stated in the documentation on checkboxes:

程序应该将具有相同名称的项组合在一起。虽然HTML规范没有明确说明这一点,但是在复选框的文档中隐含地说明了这一点:

Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property.

表单中的几个复选框可以共享相同的控件名称。因此,例如,复选框允许用户为同一属性选择多个值。

#2


Different server-side technologies will vary. With PHP, you can use an array-style syntax for the name to force a collection to be created on the server-end. If posted to the server, $_POST['colors'] will be an array with two values, #003366 and #00FFFF:

不同的服务器端技术会有所不同。使用PHP,您可以使用数组样式语法来强制在服务器端创建集合。如果发布到服务器,$ _POST ['colors']将是一个包含两个值#003366和#00FFFF的数组:

<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />

Generally speaking, you'll want to use a standard name without square brackets. Most server-side technologies will be able to parse the resulting data, and provide a collection of some type. Node.js provides helpful functionality via querystring.parse:

一般来说,您需要使用不带方括号的标准名称。大多数服务器端技术将能够解析结果数据,并提供某种类型的集合。 Node.js通过querystring.parse提供有用的功能:

const querystring = require('querystring')

querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }

#3


If you have something like this:

如果您有这样的事情:

<input type="hidden" name="x" value="1" />
<input type="hidden" name="x" value="2" />
<input type="hidden" name="x" value="3" />

Your query string is going to turn out looking like x=1&x=2&x=3... Depending on the server software you are using to parse the query string this might not work well.

您的查询字符串将看起来像x = 1&x = 2&x = 3 ...根据您用来解析查询字符串的服务器软件,这可能无法正常工作。

#4


Yes, and most application servers will collect the matching elements and concatenate them with commas, such that a form like this:

是的,大多数应用程序服务器将收集匹配的元素并用逗号连接它们,这样的形式如下:

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

... would resolve to a URL (in the GET case -- POST would work the same way, though) like this:

...将解析为URL(在GET情况下 - POST将以相同的方式工作),如下所示:

http://myhost.com/myscript.asp?myHidden=1&myHidden=2&myHidden=3

... and would be exposed to you in code like this: (e.g., following something like Response.Write(Request.QueryString("myHidden")):

...并且会在这样的代码中暴露给你:(例如,像Response.Write(Request.QueryString(“myHidden”))之类的东西:

1, 2, 3

1,2,3

So to grab the values, you'd just split the string and access them as an array (or whatever's comparable in your language of choice).

因此,要获取值,您只需拆分字符串并将其作为数组访问(或者使用您选择的语言进行比较)。

(Should be clarified: In PHP, it's slightly different (as Johnathan points out, bracket notation exposes the items as an array to your PHP code), but ASP, ASP.NET and CF all expose the values as a comma-separated list. So yes, the duplicate naming is completely valid.)

(应该澄清一下:在PHP中,它略有不同(正如Johnathan指出的那样,括号表示法将项目作为数组公开给你的PHP代码),但ASP,ASP.NET和CF都将这些值公开为以逗号分隔的列表。所以是的,重复的命名是完全有效的。)

#5


HTML5

The non-normative section 4.10.1.3 Configuring a form to communicate with a server explicitly says that it is valid:

非规范性部分4.10.1.3配置表单与服务器通信明确表示它是有效的:

Multiple controls can have the same name; for example, here we give all the checkboxes the same name, and the server distinguishes which checkbox was checked by seeing which values are submitted with that name — like the radio buttons, they are also given unique values with the value attribute.

多个控件可以具有相同的名称;例如,这里我们给所有复选框命名相同,服务器通过查看使用该名称提交的值来区分检查哪个复选框 - 就像单选按钮一样,它们也被赋予带value属性的唯一值。

The normative version of this is simply that it is not forbidden anywhere, and the form submission algorithm says exactly what request should be generated:

规范化版本只是在任何地方都不被禁止,表单提交算法确切地说明应该生成什么请求:

#6


Specifically for php I made some tests with array names in hidden inputs and I share here my results:

特别是对于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>

Submitting the form generates the next result:

提交表单会生成下一个结果:

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
)

After viewing this result I made more tests looking a better arrange of array values and ended with this (I will show only the new hidden inputs):

在查看了这个结果之后,我做了更多测试,寻找更好的数组值排列并以此结束(我将只显示新的隐藏输入):

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

obtaining this result after submitting form:

提交表格后获得此结果:

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
)

I hope this helps a few.

我希望这会有所帮助。

#7


I believe it is legal, at least in cases of radio buttons and check boxes. When I have to dynamically add textbox inputs in XSLT, I give them all the same name; in ASP.NET, Request.Form["whatever_name"] is a string of all these values comma-seperated.

我认为这是合法的,至少在收音机按钮和复选框的情况下。当我必须在XSLT中动态添加文本框输入时,我给它们所有相同的名称;在ASP.NET中,Request.Form [“whatever_name”]是一个以逗号分隔的所有这些值的字符串。

#8


I have just tried using the same control name, counties[] for several SELECT inputs so that counties in England, Scotland, Wales and Ireland in each are are all passed as values for the same parameter. PHP handles it fine, but HTML validator gives a warning. I don't know if all browsers would handle this the same way.

我刚刚尝试使用相同的控件名称,counties []用于几个SELECT输入,以便英格兰,苏格兰,威尔士和爱尔兰各县的所有县都作为相同参数的值传递。 PHP处理得很好,但HTML验证器会发出警告。我不知道所有浏览器是否都会以同样的方式处理这个问题。