HTML form with multiple hidden control elements of the same name

Asked 16/1, 2009 at 21:22 Answered 8/5, 2017 at 9:46

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?

Rumormonger answered 16/1, 2009 at 21:22 Comment(1)

Similar question at webmasters.stackexchange.com/q/9775 – Alacrity 7/5, 2022 at 12:11

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.

Anallese answered 16/1, 2009 at 21:41 Comment(1)

Side note (6 years later): ASP.NET uses hidden form fields alongside its checkbox controls so that it knows the checkbox controls exist. This is a workaround for HTML not sending the named of unchecked checkboxes. – Anallese 20/1, 2015 at 14:59

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'] }

Castilian answered 16/1, 2009 at 21:27 Comment(8)

I've never seen that array syntax before. – Rumormonger 16/1, 2009 at 21:30

If you are passing a collection of related details through to the server, this method is extremely helpful in that it allows them to travel as a group, rather than numerous independent values. – Castilian 16/1, 2009 at 21:32

The thing with the square brackets is PHP's invention, not any kind of web standard. Other languages and form-reading libraries have different mechanisms for accessing multiple submissions with the same name, not necessarily involving changing the name like this. – Panslavism 16/1, 2009 at 22:15

In ASP.net you can get the posted value array by calling Request.Form.GetValues. For example: string[] postedValues = Request.Form.GetValues("name_of_the_elements"); Or Request.QueryString.GetValues("name_of_the_elements"). – Won 28/6, 2012 at 10:42

How can I serialize this group in javascript ? I want to pass this group of values threw ajax ? – Quatrefoil 21/11, 2015 at 13:40

7 years now, does this still work? Does this array technique work with other server-side technologies like node.js for example? – Idun 10/10, 2016 at 13:2

@Idun I think this was PHP only (or very uncommon). Node provides a helpful functionality by way of querystring.parse that will merge multiple values like this into an array: nodejs.org/api/… – Castilian 11/10, 2016 at 6:4

@AkosLukacs your comment deserves to be an answer :) – Healey 31/12, 2018 at 20:19

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.

Weichsel answered 16/1, 2009 at 21:28 Comment(3)

Do you know if the ordering is specified? I only found that it will be a sequence, but not that is ordered in the way it is declared. So could it be that you get x=2&x=3&x=1? – Philipps 16/9, 2010 at 6:31

order is preserved: #4028135 – Hazeghi 30/8, 2012 at 20:6

In case anyone is wondering, PHP will always use the value from the last input element with this type of example – Defecate 13/3, 2013 at 5:23

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

Boynton answered 16/1, 2009 at 21:37 Comment(5)

Sorry, I should've been more specific: "everything except PHP." ;) ASP, ASP.NET, CF all operate this way. PHP privileges the final item in the list, unless the bracket notation is specified, as Johnathan mentions in his answer. The point is that the HTML syntax is valid. – Boynton 16/1, 2009 at 22:53

Added the PHP note for clarification. – Boynton 16/1, 2009 at 22:58

So everything except PHP, Perl CGI.pm, Python cgi.py, htmlform, django etc., Ruby on Rails, Java Servlet... – Panslavism 17/1, 2009 at 10:22

I thought CGI.pm worked this way -- certainly it does for checkboxes. My current experiments with CGI::Application (which lead me to this question in the first place) now seem to agree. – Pressmark 2/11, 2011 at 17:11

If you're using asp.net, and you want to get individual values without commas, you can use request.QueryString.GetValues("myHidden") to return an array. msdn.microsoft.com/en-us/library/4ba5htte%28v=vs.90%29.aspx – Hallelujah 1/5, 2013 at 16:53

HTML5

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

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.

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:

no constraint is violated: https://www.w3.org/TR/html5/forms.html#constraints
multiple names get added to the "form data set" one after the other: https://www.w3.org/TR/html5/forms.html#constructing-form-data-set
encodings like application/x-www-form-urlencoded loop over the "form data set" and spit out multiple key=val https://www.w3.org/TR/html5/forms.html#url-encoded-form-data

Arithmetician answered 1/6, 2016 at 21:41 Comment(0)

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

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

Cleaning answered 8/7, 2016 at 15:57 Comment(0)

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.

Wendeline answered 12/7, 2013 at 1:42 Comment(0)

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.

Phototelegraphy answered 8/5, 2017 at 9:46 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags