If your form control (here: a
select element) is part of a form (descendant of a
form element), then the
Form object that represents the
form element is third-next in the scope chain of code in the control's event-handler attribute values (second-next is the form control object itself, next is the Variable Object of that code).
Form object has the names of the controls contained in the form that it represents as the names of its properties that refer to the corresponding form control objects. IOW, you can write
which is the proprietary shorthand of the standards-compliant (W3C DOM Level 2 HTML), but equally backwards-compatible
Now, if you use a form control's name in an event-handler attribute value of a form control in a form, like
<… name="border" onchange='border(this.value)' …>
that is the same as if you had written the half-proprietary
<… name="border" onchange='this.form.border(this.value)' …>
or the standards-compliant
<… name="border" onchange='this.form.elements["border"](this.value)' …>
because a potential global
border() function is a property of the ECMAScript Global Object which comes last, after the
Form object (an object implementing the
HTMLFormElement interface in the W3C DOM), in the scope chain.
However, the form control object referred here by
border is not callable (does not implement the ECMAScript-internal
[[Call]] method or implements it so that it throws an exception when called). So if you try to call the object with
TypeError exception is thrown, which you should see in the script consoles (like "TypeError: border is not a function" in the Developer Tools of Chromium 16.0.912.77 [Developer Build 118311 Linux]).
Microsoft, Netscape's competitor in the 1990s, had to copy that feature for the MSHTML DOM so that code written for Netscape would also run in Internet Explorer (3.0), with JScript (1.0). And Microsoft's competitors copied it to their DOM implementations for exactly the same reason. It became part of a quasi-standard (now called "DOM Level 0").
Then came the DOM Level 2 HTML Specification, a continuing effort to standardize and extend common features of existing DOM implementations at the time. A W3C Recommendation since 2003-01-09, its ECMAScript Language Binding specifies that items of
HTMLCollections can be accessed by their name or ID with the bracket property accessor syntax
], equivalent to calling the
namedItem() method of the object implementing the
form element objects and element objects for form controls in forms are items of
HTMLCollections in the W3C DOM,
HTMLFormElement::elements, respectively. But for backwards compatibility in browsers,
needs to be equivalent to
So, with the implementations of W3C DOM Level 2 HTML interfaces at the latest, this feature started to apply to elements with ID (
id attribute value) as well (which can be seen in Chromium, for example).
If you avoid using the same name or ID for form controls and forms that you use as identifier of user-defined functions, and that are already used for built-in form properties (like
reset), then this becomes less of an issue. Also, it is a bad idea to use the same identifier for the function and one of its arguments as (confusing code aside) that makes the function object inaccessible from within the function (the Variable Object of the function context comes first in its scope chain).