Input attributes that can have the same "name"

Question

I noticed that if you have a couple of radios together, you are required to make the name attribute identical on all of them in order for the radios to work as expected:

  <label for="a1"><input type="radio" name="a" id="a1" value="1">1</label>
  <label for="a2"><input type="radio" name="a" id="a2" value="2">2</label>
  <label for="a3"><input type="radio" name="a" id="a3" value="3">3</label>
  <label for="a4"><input type="radio" name="a" id="a4" value="4">4</label>

Is the radio input the only input type where you can have duplicate name attributes (and required to do so)? If I do this on any other input, it would be considered invalid by the browser, right?

I'm asking this because I need to handle this situation in a script, and want to know if there are other input types I should take into consideration when dealing with multiple identical names.

score 13 · Accepted Answer · answered Mar 30 '12 at 14:34

From a user-interaction perspective, input:radio elements use the same [name] so that the browser knows to only allow one to be :checked at a time.

From a form-submission perspective, any elements can have the same name, they will all be serialized into the query string as defined in the HTML Spec

Here are a couple examples:

<form action="/foo/bar">
    <input type="hidden" name="fizz" value="buzz" />
    <input type="radio" name="foo" value="bar" />
    <input type="radio" name="foo" value="baz" />
    <input type="submit" value="Go" />
</form>

Submitting this form (with the bar radio button checked) will result in a query string of:

?fizz=buzz&foo=bar

However, if you change the name of the input:hidden element to foo:

<form action="/foo/bar">
    <input type="hidden" name="foo" value="buzz" />
    <input type="radio" name="foo" value="bar" />
    <input type="radio" name="foo" value="baz" />
    <input type="submit" value="Go" />
</form>

The querystring will be:

?foo=buzz&foo=bar

The server should correctly parse this so that you can get both buzz and bar values, however I've found that some server-side languages have quirks when it comes to query string parsing.

PHP in particular will turn keys into arrays if the key is suffixed with []:

?foo[]=buzz&foo[]=bar will have $_GET['foo'] = array('buzz', 'bar');

score 9 · Answer 2 · answered Mar 30 '12 at 14:09

Is the radio input the only input type where you can have duplicate name attributes

No. Any form control can share a name with any other form control.

This is particularly useful for checkboxes (it allows you to say "Pick any number of these" and then loop over the results on the server without having to hard code a different name for each item.) and submit buttons (it lets you tell which one was clicked without looping over all possible names).

(and required to do so)?

Yes. Only radio buttons get special behaviour based on shared names.

Server side may have "special" behavior for other elements that share the same name, in terms of how they are parsed/bound. Of course that's not part of HTML spec and varies from framework to framework. — AaronLS, Nov 01 '12 at 21:09

score 2 · Answer 3 · answered Mar 30 '12 at 14:13

2

It is perfectly valid to have the same value for name attributes on pages.

A common fallback for checkboxes is to have a hidden input of the same name with a value set to false. When using the same name values tho be sure to double check the expected output, normally the latest value to be parsed will overwrite any previous parameters of the same name.

If you need to group various fields under the same name you can actually create an array with multiple elements, eg:

<input name="list[]" />
<input name="list[]" />
<input name="list[]" />

answered Mar 30 '12 at 14:13

Dunhamzzz

14,682
4
50
74

also be careful about hidden field security risk! – Ashok Raj Mar 30 '12 at 14:14
2

Assuming the last value will win and having `[]` on the end of the name is a *very* PHP-centric view of the universe. – Quentin Mar 30 '12 at 14:15
1

@AshokRaj what specific types of security risk do hidden fields introduce that any other kind of input doesn't? – Dunhamzzz Mar 30 '12 at 14:26
1

@Dunham I think he's referring to the fact that some naive devs assume the hidden field input can be trusted, and do not consider that it can be modified just like any other input field(some devs I've known did not even know you could edit them). So yes I agree, there isn't anything different in terms of security from other fields, and I think he was on the same page of saying be careful about the "security risk [of trusting hidden inputs]". – AaronLS Nov 01 '12 at 21:14

score 1 · Answer 4 · edited May 23 '17 at 12:16

You can also have multiple hidden inputs of the same name. As pointed out it is a matter of how the server side framework will parse them. In .NET MVC the model binder will look for a collection of the same name in the parameter of the post action method or a property on the view model parameter of the post action. Such as List<int>, List<Guid>, or List<string>

See as an example: https://stackoverflow.com/a/2013915/84206

score 1 · Answer 5 · answered Mar 30 '12 at 14:10

1

Well, technically all that matters is the URL string generated. So you could theoretically have two submit buttons with the same name...

answered Mar 30 '12 at 14:10

ControlAltDel

33,923
10
53
80

score 1 · Answer 6 · answered Mar 30 '12 at 14:11

1

no, some other controls are exist with dup name;)

answered Mar 30 '12 at 14:11

Maziar Aboualizadehbehbahani

1,976
17
37

score 0 · Answer 7 · answered Mar 30 '12 at 14:14

0

some elements names or attributes when used multiple times are just ignored by the HTML parser
For example if you use more than one id only the first is considered.

answered Mar 30 '12 at 14:14

Ashok Raj

444
6
25

Note that you are talking about the `id`, which you shouldn't have duplicates of for the reason you mentioned. However the `name` you can have multiple of. – AaronLS Nov 01 '12 at 21:08

Input attributes that can have the same "name"

7 Answers7

Linked