Does a Name Attribute Have to Be Unique in a HTML Document

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

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.

Do input field NAMES have to be unique across forms?

No, they don't have to be unique across forms or within forms.
The most common use of repeating them is radios:

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

was the name attribute really needed in html?

name, id, and class have fundamentally different purposes.

• name is for form element names and is not required to be unique (in fact, sometimes you need to reuse the same name).
• id is, as the name indicates, an identifier for an element and must be unique in the document as a whole.
• class is primarily for presentation (although it sometimes used for hooking up client-side UI as well) and contains a list of classes for the element, not just a single class. If you used class for form field identification, which of the possibly-several classes would you use?

Ways you might use the same name on more than one field:

1. You can use the same name in different forms without there being any conflict.

2. You use the same name within a form for radio buttons that should be grouped together.

3. You can use the same name within a form for multiple other kinds of elements whose values should all be sent to the server.

In contrast, id must be unique — not only within the form, but within the entire document.

#3 might need an example for clarity. Suppose you have:

<form action="example" method="get">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="submit" value="Send">
</form>

If the user fills in a, b, and c in those three text fields and sends the form, this is the query string:

?foo=a&foo=b&foo=c

Notice that foo was repeated. The receiving resource can access all three of those values. (Perhaps you're listing tags for a post, or all of your children's names, or...)

Does ID have to be unique in the whole page?

Yes, it must be unique.

HTML4:

https://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Section 7.5.2:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

HTML5:

https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id

The id attribute specifies its element's unique identifier (ID). The
value must be unique amongst all the IDs in the element's home subtree
and must contain at least one character. The value must not contain
any space characters.

HTML: Can always the same identifier be used for name and id attributes?

Is there any reason to choose different identifiers for the name and id attributes?

Yes. IDs must be unique, names don't have to be. Names must be the same for members of a radio group, so they can't all have the same id—well, they can in practice but accessing the elements by ID will be problematic. And if you don't access them by ID, why have it?

Are there any use-cases for which different identifiers are required?

Yes, radio buttons. Only one can have an id that is the same as its name. But otherwise, there are few restrictions, such as than never give form controls the name or id of a method or property of the form itself, like "submit", as it will mask the same–named property of the form.

Also, names "_charset_" and "isindex" are special.

Are there any differences in syntax? (for example you can use "myarray[123]" for the name attribute and PHP will understand that correctly and create an array, can that also be used in a similar manner for id-attributes in Javascript or CSS - and if not, is that a syntax-error or is it simply a valid identifier with brackets in it?)

Yes. The rules for name and id attribute values are similar but an ID must not contain spaces (and some values for name are special, see above). There were more restrictions on id attributes in HTML4 (e.g. ids couldn't start with a number), but in practice they weren't implemented in browsers.

Some characters that are valid in names and ids must be quoted to use as CSS selectors, e.g. for:

<div id="d[]">

the CSS selector is:

#d\[\]

and for use with the Selectors API:

#d\\[\\]

(e.g. document.querySelector('#d\\[\\]').

Are both case-sensitive?

Yes.

Is it OK to have multiple HTML forms with the same name?

Regarding the HTML 4.01 specication, you can use form elements with the same name attribute, as there is no uniqueness requirement on them. Doing so defeats the purpose of such attributes, though. They are meant for making it easier to refer to forms in client-side scripting: if you have <form name=foo>, then document.foo refers to that form.

It is undefined what happens when same name attribute is used, but what browsers seem to do is to return an array. In your example, document.foo would be a 3-element array, with document.foo[0] being the first form. But this is not useful, since (assuming there are no other forms in the document) you could use document.forms[0], with a well-defined meaning.

The name attribute itself is outdated for form elements (but not for form fields, where it keeps being essential). The HTML 4.01 spec clause on form says:

“name = cdata [CI]
This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.”

In the HTML5 drafts, even the formal rules disallow the use of the same name attribute. The HTML5 clause on the name attribute on form says that its value “must be unique amongst the form elements in the forms collection that it is in, if any”. This is a confusing formulation, but it is safest to assume that it must be unique within the form elements of a document.

Difference between id and name attributes in HTML

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

Is it redundant to use the name attribute for input fields in modern web development?

The name attribute is the notation to reference specific elements within the scope of a webpage through non-DOM Javascript:

document.forms['your_form'].elements['aa']

The id attribute for the element needs to be set with the same value for the following to work:

document.getElementById('aa')

My understanding is that when Netscape created Javascript, it used the name attribute. The HTML spec however decided to go with id, but kept name for backwards compatibility. IME, using the name attribute was required for Internet Explorer 6 support because the javascript engine in IE wouldn't read the id attribute - only the name though both were defined.

...could be avoided the use of this attribute with input fields of "text" type (when there aren't no styling or scripting purposes)?

If you don't have any javascript attached to the text fields, yes - they would be unnecessary.

---

Related Topics