Difference between name= and id=

[Neil Cherry]

I'm working on a JavaScript program and I'm running into name=blah and
id=blah. Sometimes it's one or the other and other times it
both. Does anyone have a good reference that can help me figure this
out? The books I have don't seem to really be of any help as they're
more towards JavaScript coding that working with the html/javascript.

Here are a few examples:

<frameset cols="600, *" id="overallFrame">
<frameset id="leftSide" rows="*, 0">
<frame name="L" src="L.html">
:
:

 

[RobG]

I'm working on a JavaScript program and I'm running into name=blah and
id=blah. Sometimes it's one or the other and other times it
both. Does anyone have a good reference that can help me figure this
out? The books I have don't seem to really be of any help as they're
more towards JavaScript coding that working with the html/javascript.

The definitive "guide" (the W3C HTML 4.01 spec) is here:

<URL:http://www.w3.org/TR/html4/>

You may want to also look at xhtml, but for now HTML 4.01 is it.

To speed your resolution of name/id, the full list of attributes and
the elements they apply to is here:

<URL:http://www.w3.org/TR/html4/index/attributes.html>

Now my understanding is that:

When Netscape created JavaScript, they used "name" to identify
elements. MS built IE to copy Netscape, so also supported "name".

However, the HTML spec decided to use id to identify elements but keep
name for backwards compatibility. Name still applies to form elements
and lots of others (e.g. name is mandatory on PARAM elements). MS seem
to hate ever removing functionality, so they continue to support name
as if it was ID.

Now you're really confused, right?

Many programmers put the same name and ID on form elements. This isn't
required, but may be helpful if you intend to reference the element
using both the forms.elements collection and getElementById.

e.g. <form name="aForm" ... >
<input name="aa" id="aa" ... >

Can be referenced using the name as:

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

or the id as:

document.getElementById('aa')

You can put the same name on a number of form elements to create a
collection - e.g. radio buttons - but use with care.

The only reason to give any element an id is if you intend to reference
if in some way, otherwise it is unnecessary. The name of form elements
is included in the data sent when the form is submitted, the id isn't.

If you use document.getElementById('blah') in IE, it will match
<... name="blah"> as well as <... id="blah">. Other browsers will only
match id.

So the bottom line is:

Form elements must have a name if you want them to be submitted
(put a name on all of them unless you are certain you want to do
otherwise - e.g. buttons)

Some element *must* have a name.

Use id only if you need to refer to an element (usually using
getElementById).

If an element needs both an ID and a name, it's probably convenient to
make them the same.

Keep names and ids of different elements unique (mandatory for IDs).

 

[Dag Sunde]

The definitive "guide" (the W3C HTML 4.01 spec) is here:

<URL:http://www.w3.org/TR/html4/>

You may want to also look at xhtml, but for now HTML 4.01 is it.

To speed your resolution of name/id, the full list of attributes and
the elements they apply to is here:

<URL:http://www.w3.org/TR/html4/index/attributes.html>

So the bottom line is:

Form elements must have a name if you want them to be submitted
(put a name on all of them unless you are certain you want to do
otherwise - e.g. buttons)

Some element *must* have a name.

Use id only if you need to refer to an element (usually using
getElementById).

If an element needs both an ID and a name, it's probably convenient to
make them the same.

Keep names and ids of different elements unique (mandatory for IDs).

In addidion to that, ID's are used by CSS when containing a style
declared with an id selector (#):

The id selector is different from the class selector(.).
While a class selector may apply to SEVERAL elements on a page,
an id selector always applies to only ONE element.
An ID attribute must be unique within the document.
The style rule below will match a p element that has the id value "para1":
p#para1
{
text-align: center;
color: red
}

 

[Neil Cherry]

The definitive "guide" (the W3C HTML 4.01 spec) is here:

<URL:http://www.w3.org/TR/html4/>

You may want to also look at xhtml, but for now HTML 4.01 is it.

Rob and Dag, thank you very much this is very useful!

 

[RobG]

The XHTML spec says:

"Note that in XHTML 1.0, the name attribute of these elements is
formally deprecated, and will be removed in a subsequent version of
XHTML."

<http://www.w3.org/TR/xhtml1/#h-4.10>

Use 'id'.

In regard to HTML 4, the name *must* be used for form controls
to be successful. If they only have an id, they will not be
submitted.

"When a form is submitted for processing, some controls have
their name paired with their current value and these pairs
are submitted with the form. Those controls for which
name/value pairs are submitted are called successful
controls."

<URL:http://www.w3.org/TR/html4/interact/forms.html#control-name>

 

[Michael Winter]

RobG wrote:

[Stuff about name in XHTML]

In regard to HTML 4, the name *must* be used for form controls
to be successful.

That remains true for XHTML as well.

Only form controls, OBJECTs, PARAMs, and METAs are permitted a name
attribute.

[snip]

Mike