HTML form with multiple hidden control elements of the same name

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.


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:

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

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 ColdFusion all expose the values as a comma-separated list. So yes, the duplicate naming is completely valid.)


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:

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

const querystring = require('querystring')

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

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:

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.