- Compliant browsers use id and then name in the forms collection.
- Traditionally browsers used name, and some browsers haven't yet started supporting id only.
- There are two good ways of doing it.
One way is to use document.getElementById('dice_toss'); the other way is to use document.forms['dice_toss'] that the form is given that name and just not id.
In any ways, you need to understand that name means different things depending on what elements it's used on, and it is treated differently in different situations.
HTML/XHTML distinctions:
- On form controls: The name attribute is the form control name, in other words it is the label that will be given to the control value when sending it to the server. Checkbox and radio controls may share names, but all other controls must be unique *within the form*. The id attribute on the hand must be a unique identifier *within the document*. The name attribute allows several charachters that the id attribute does not, but that's okay since they have entirely different purposes and use. There is no need to have the same id and name value here. The id attribute is made for client side handling while the name attribute is for the server when recieving the form. Form controls that the user can change the state of, as well as hidden controls, MUST have a name attribute. (As per the HTML4.01 spec.)
- On non-form-control, non-frame elements: name and id share namespace and are both treated as if they were ids, each element may only be given one unique identifier and thus they may not contain different values. The name attribute allows some characters that the id attribute does not, these should be avoided. This category includes the form element.
- and I'll skip explaining the frame elements...
DOM/JavaScript distinctions:
- document.form_name access is proprietary. It's ubiquitous but discouraged and should be avoided.
- document.forms['form_name'] syntax is on the other hand DOM0 and W3C DOM and is recommended. The only caveeat is that some browsers haven't started supporting id for form names.
- document.getElementById('fom_name') is supported by all browsers, and should work in all browsers as long as you use the id attribute for the form name.
- document.getElementsByName is horribly broken and implemented differently in ALL browsers to date (Try it with all possible types of id/name combos in a document and html/xhtml/xml content types and you'll see a bloody mess of different behaviors, sometimes different in different versions of the same browser.). Not to speak of the fact it's intended only for form control names, but that distinction doesn't seem to take place in browsers.
