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:

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

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

回答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.

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

回答4:

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

回答5:

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

回答6:

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

回答7:

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.