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:

Answer 1

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');

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.