HTML form with multiple hidden control elements of the same name

前端 未结 8 1902
-上瘾入骨i
-上瘾入骨i 2020-11-27 06:14

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 i

相关标签:
8条回答
  • 2020-11-27 06:27

    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
    0 讨论(0)
  • 2020-11-27 06:32

    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.

    0 讨论(0)
  • 2020-11-27 06:37

    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.

    0 讨论(0)
  • 2020-11-27 06:38

    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.

    0 讨论(0)
  • 2020-11-27 06:50

    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'] }
    
    0 讨论(0)
  • 2020-11-27 06:50

    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.

    0 讨论(0)
提交回复
热议问题