Does a name attribute have to be unique in a HTML document?

Question

I remember reading in the spec once that both the id attribute and the name attribute share the same namespace and have to be unique. Henceforth I've always tried to fulfill this requirement in my applications, dreading even to give the same id and name to the same element.

But lately I've started working with ASP.NET MVC 3, and it (like PHP) can use the same name attribute on several input controls to form a collection of values at server-side. I tried to look up the relevant section in the spec - but failed to find it. Perhaps I have misunderstood something then, or read the wrong documentation?

How is it then? I want to produce as valid HTML as possible (both 4.01 and 5 in different apps). Can I use this trick without fear? Or would I be violating something and should better stick to unique values?

Answer 1

The name attribute is only valid on the <form> and form elements (<input>,<textarea> and <select>). It's used to specify the name to associate with the name/value pair that is submitted on a form post.

For example:

<input type="checkbox" name="foo" value="1" />

if checked will submit foo=1. In the DOM you can reference form elements from the form.elements collection by specifying the name as the index. If name is not unique, the collection returns an array of elements rather than the element. Modern DOM's support looking up form elements by name as:

 document.getElementsByName(nameValue)

note: it always returns an array even if only one element is found.

id attribute is from the XML world, and is a unique id for any node, not just form elements. Unlike the name attribute it is valid on any HTML node. Also like the name attribute, it must follow the valid identifier rules. The identifier should start with an alpha, and only contain alpha ([a-zA-Z]), numbers, hyphen, underscore and colons (note ASP.NET breaks this rule by starting reserved IDs with a underscore - thus they will always fail an HTML/XML lint - actually some proxies strip them). To find any HTML element by id you use:

document.getElementById(idvalue)

this only returns one DOM node.

Answer 2

The name attribute is not unique. For instance, it is used to group radio buttons. It represents the value of a particular form property. ids must be unique.

Answer 3

ID should be unique but you can use multiple form elements with the same NAME. This is standard for how radio buttons work so you can force one seletion of a radio button group.

Answer 4

Must names be unique between forms for radio input groups?

I understood that name didn't have to be unique because radio elements can share the same name, but nobody said whether or not groups of radio elements in different forms would interfere with each other or not. So I created this simple example below to test. In my browser, I can pick 2 of the 6 radios in the example below, and there are two forms. So it appears that putting them in separate forms will isolate them.

<form>
  <input type="radio" name="test" value="1">
  <input type="radio" name="test" value="2">
  <input type="radio" name="test" value="3">
</form>

<form>
  <input type="radio" name="test" value="a">
  <input type="radio" name="test" value="b">
  <input type="radio" name="test" value="c">
</form>

I also wondered if the same behavior would hold true with the newer <fieldset> element, however it doesn't seem to. I guess that makes sense because if I sent the form it would need to format the data to accommodate the name conflict somehow. I can only pick 1 among the 6 radios here:

<form>
  <fieldset name="test1">
    <legend>test1</legend>
    <input type="radio" name="test" value="1">
    <input type="radio" name="test" value="2">
    <input type="radio" name="test" value="3">
  </fieldset>
  <fieldset name="test2">
    <legend>test2</legend>
    <input type="radio" name="test" value="a">
    <input type="radio" name="test" value="b">
    <input type="radio" name="test" value="c">
  </fieldset>
</form>

I'm not sure why anyone would want to do this, but you can also associate each element with a different form by using the form=<form id> attribute. It seems to separate the radio groups again. As shown here:

<form id="a">
</form>

<form id="b">
</form>

<fieldset name="test1">
  <legend>test1</legend>
  <input form="a" type="radio" name="test" value="1">
  <input form="a" type="radio" name="test" value="2">
  <input form="a" type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
  <legend>test2</legend>
  <input form="b" type="radio" name="test" value="a">
  <input form="b" type="radio" name="test" value="b">
  <input form="b" type="radio" name="test" value="c">
</fieldset>

I think ideally a fieldset would create some sort of grouping that was more than just visual, but it doesn't oh well. At least radio groups can be separated by forms.

Addendum: What does the form data look like when you use the same name within two or more fieldsets inside of one form? Let's see.

My suspicions are confirmed. There's just one 'test' parameter and fieldsets have no effect on the data at all. Try picking a radio and hitting submit.

function examine(e){
  e.preventDefault()
  e.stopPropagation()
  var formData = new FormData(e.target)
  ,formProps = Object.fromEntries(formData)
  document.getElementById('out').innerText = JSON.stringify(formProps,null,2)
  return false;
}
document.getElementById('mainform').addEventListener('submit',examine)

<form id="mainform">
  <fieldset name="test1">
    <legend>test1</legend>
    <input type="radio" name="test" value="1">
    <input type="radio" name="test" value="2">
    <input type="radio" name="test" value="3">
  </fieldset>
  <fieldset name="test2">
    <legend>test2</legend>
    <input type="radio" name="test" value="a">
    <input type="radio" name="test" value="b">
    <input type="radio" name="test" value="c">
  </fieldset>
  <button type="submit">examine</button>
</form>
<pre id="out"></pre>