HTML: Can I always use the same ID for the name and ID attributes?
Mostly the "name" attribute is used in server-side programming (name / value pairs are sent in requests) and the "id" attribute is used in client-side programming (like Javascript and CSS).
But both serve essentially the same function - they provide unique identification of an item. And in order to complicate things not too much, it is useful if the thing has only one identifier.
So the question is for tags that need both "id" and "name":
Is there a reason to choose different IDs for the name and ID attributes? Are there any use cases that require different IDs? Are there any syntax differences? (for example, you can use "myarray [123]" for the name attribute, and PHP will figure out what is correct and create an array, can also be used in a similar way for id attributes in Javascript or CSS, and if not, that is a syntax error or is it just valid id with parentheses in it?) Are they case sensitive?
source to share
Is there a reason to choose different IDs for the name and ID attributes?
Yes. Identifiers must be unique, names do not have to be. The names must be the same for the members of the radio group, so they cannot have the same ID, they can in practice, but accessing the elements by ID would be problematic. And if you don't access them by ID, why bother?
Are there any use cases that require different identifiers?
Yes, switches. Only one can have an identifier that matches its name. But otherwise, there are several restrictions, such as never submitting forms control the name or identifier of a method or a property of the form itself, such as "submit", since it will mask the same type property of the form.
In addition, the names " _charset_
" and " isindex
" are special .
Are there any syntax differences? (for example, you can use "myarray [123]" for the name attribute and PHP will figure out what is correct and create an array, can also be used in a similar way for id attributes in Javascript or CSS, and if not, what a syntax error or is it just valid id with parentheses in it?)
Yes. The rules for name and id of an attribute value are similar, but the identifier must not contain spaces (and some values for the name are special, see above). There were more restrictions on id attributes in HTML4 (for example, identifiers could not start with a number), but in practice these were not implemented in browsers.
Some characters that are valid for names and IDs need to be specified for use as CSS selectors, eg. for:
<div id="d[]">
CSS selector:
#d\[\]
and for use with the Selectors API:
#d\\[\\]
(eg document.querySelector('#d\\[\\]')
.
Are they case sensitive?
Yes.
source to share
To answer the question in the title: Yes, whenever the syntax of an element allows an attribute name
, its value can be identical to the value of the attribute id
. This follows from the attribute declarations name
: its value is any string, and the only constraint imposed is on the element a
; and for that the requirement is that the attribute value name
must not match the attribute value of id
another element (but must match the attribute value of id
the same element, if present).
To clear up the assumptions in the question: The attribute name
on form field elements is really intended primarily for server side processing; but various other elements can have an attribute name
for different purposes. The attribute id
is useful in client-side programming, but it also has the effect of creating a target binding so that an element can be referenced by a link in the same document or in another document. Technically, there is no tag, which "needs" like id
, well name
, or even one of them; whether or not they are used depends on practical purposes. The attribute name
does not have to be unique, and it is not intended to provide unique identification. You can, for example, have an arbitrary number of elements input
with the same attributename
...
The syntax has id
traditionally been limited by the HTML specifications, but browsers have been much more permissive, and HTML5 PR imposes no other restrictions other than the following: the value must not be empty (that is, it must contain at least one character), it must not contain spaces, and it must be unique in the document (that is, no two elements can have the same attribute value id
).
The syntax name
has always been free. Apart from the specific rules for the element a
, the only restriction is that the value must not be empty.
Both attribute values id
and name
are case sensitive. Item-specific rules a
impose case-insensitive constraints for obsolete reasons.
There are many possible reasons why you might do id
and are name
different for an element. For example, when interacting with an existing server-side script that requires very long and complex field names, you must use them in attributes name
, but you can choose your own attributes id
.
The choices made when writing the values of the id
and attributes name
have consequences, but they depend on the contexts in which the values are used. For example, if an attribute value id
starts with a number, it cannot be directly used in a CSS selector due to CSS syntax (but must be escaped). Likewise, how values are used in JavaScript depends on the syntax you use, but you can always refer to them in some way.
source to share
the name attribute does not usually have to be unique. A given HTML document can have multiple forms, and each of them can have elements that have names that are identical to the names in other forms.
If you are using PHP saying:
<form>
<input type="text" name="foo[]" />
<input type="text" name="foo[]" />
</form>
will force PHP to read this name as an array and all records will be contained in it. Names can be used as attributes for elements other than the form, however they are most often used only within the form.
Attributeid, on the other hand, must be able to uniquely identify a given DOM element within a document. You shouldn't use it that way. The browser won't explode if you use the same ID on two different elements. But if you have two elements with the same ID, the last one you add takes precedence over the previous ones. Thus,
document.getElementById( 'foo' )
// or
$( '#foo' )
will return only one element out of several.
id can be used to identify any element within a document and is not limited to form
source to share