Best IT Recipes

HTML form with multiple hidden controls of the same name

Is it legal to have an HTML form with more than one “hidden” control with the same name? I expect to get the values ​​of all these elements on the server. If it's legal, do major browsers do the right thing?

+47
html-form hidden-field
Jan 16 '09 at 21:22
source share
8 answers

Everything is fine in browsers. However, as the application library analyzes, it can vary.

Programs are supposed to group identically named elements together. Although the HTML specification does not explicitly say this, it is implicitly indicated in the documentation on the flags :

Multiple checkboxes in a form can share the same control name. Thus, for example, checkboxes allow users to select multiple values ​​for the same property.

+36
Jan 16 '09 at 21:41
source share

Different server technologies will be different. With PHP, you can use array-style syntax for the name to force the collection to be created on the server. If sent 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 will want to use a standard name without square brackets. Most server technologies will be able to analyze the data and provide a collection of some type. Node.js provides useful functions through querystring.parse :

 const querystring = require('querystring') querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }
+26
Jan 16 '09 at 21:27
source share

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

The query string will look like x=1&x=2&x=3 ... Depending on the server software you use to parse the query string, this may not work.

+18
Jan 16 '09 at 21:28
source share

Yes, and most application servers will collect the corresponding elements and combine them with commas so that this form looks 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>

... will be converted to a URL (in the case of GET - POST will work the same way), for example:

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

... and will be presented to you in the following code: (for example, after something like Response.Write (Request.QueryString ("myHidden")):

1, 2, 3

Thus, to get the values, you just need to split the string and access them in the form of an array (or any other comparable language of your choice).

(You should clarify: in PHP, this is slightly different (as Jonathan points out, the notation in brackets represents the elements as an array in the PHP code), but ASP, ASP.NET and ColdFusion represent the values ​​as a comma-separated list. So yes, the duplicate naming convention is completely valid .)

+5
Jan 16 '09 at 21:37
source share

HTML5

Non- normative section 4.10.1.3 Configuring the form to communicate with the server clearly says that it is valid:

Multiple controls can have the same name; for example, here we assign the same name to all the flags, and the server selects which flag was checked, seeing what values ​​are transmitted with this name - for example, switches, they are also assigned unique values ​​with the value attribute.

The normative version of this simply lies in the fact that it is not forbidden anywhere, and the form submission algorithm determines exactly which request should be generated:

+2
Jun 01 '16 at 21:41
source share

Specially for PHP, I conducted several tests with array names in hidden inputs and shared my results here:

 <!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 produces the following 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 looking at this result, I did more tests looking for the best location of the array values ​​and ended up with this (I will only show the new hidden input data):

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

Getting this result after submitting the 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 bit.

+2
Jul 08 '16 at 15:57
source share

I believe this is legal, at least in the case of radio buttons and checkboxes. When I need to dynamically add input to XSLT, I give them the same name; in ASP.NET, Request.Form ["whatever_name"] is a string of all these values, separated by commas.

0
Jul 12 '13 at 1:42 on
source share

I just tried to use the same control name, counties [] for several SELECT inputs, so that counties in England, Scotland, Wales and Ireland in each of them are passed as values ​​for the same parameter. PHP does a great job of this, but the HTML validator gives a warning. I don’t know if all browsers would be processed in the same way.

0
May 8 '17 at 9:46 a.m.
source share


More articles:


All Articles