Input Attributes That Can Have The Same "name"

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:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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

Solution 5:

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

Share