faqts : Computers : Programming : Languages : JavaScript : Forms

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

64 of 67 people (96%) answered Yes
Recently 9 of 10 people (90%) answered Yes

Entry

What is the difference between the NAME & ID properties of an element?

Feb 22nd, 2005 23:55
jsWalter, Joe Bloggs, Lasse Nielsen, David Laub, http://www.w3.org/TR/html4/struct/links.html#h-12.2.3


In short...

IDs are unique. NAMEs are not.

PERIOD.

example...

  <input type="radio" name="gender" id="male" value="male" />Male
  <input type="radio" name="gender" id="female" value="female" />Female

the NAME of this RADIO family is GENDER, this classifies this as a 
group and the browser will automatically limit your selection to one 
or 
the other.

the ID, on the other hand, gives each button a unique identifier.

example 2...

  <input type="text" name="addrBlock" id="addr">
  <input type="text" name="addrBlock" id="city">
  <input type="text" name="addrBlock" id="state">
  <input type="text" name="addrBlock" id="zip">

This gives you 4 text boxes to enter your address

This will return a reference to the CITY text box...
   objElement = document.getElementById ('city');

This will return an array of references to all Form Elements...
   aryAddrBlock = document.getElementsByName ( 'addrBlock' );

All this gives you flexibility in how to handle form elements.


Form elements, or controls, are (for this purpose): <input>, <select>,
<textarea>, <button>, and <object> elements. On top of this, the name 
attribute is also used as a name on the <param> and <meta> elements.

The name attribute is still valid on some other elements, where it is 
used as an *anchor*, not a name. As an anchor, it should still be 
unique. On these elements, it is recommended to use the "id" 
attribute, 
and if you use both "id" and "name" (e.g., for compatability with 
Netscape 4), they *must* have identical values.

These other element are: <a>, <applet>, <form>, <frame>, <iframe>, 
<img>, and <map>.

jsWalter