javascript

Chapter 13: Scripting Forms
If a name is in use by multiple form controls, as is the case with radio buttons, then a NodeList is
returned containing all of the elements with the name. For example, consider the following HTML
snippet:
< form method=”post” id=”myForm” >
< ul >
< li > < input type=”radio” name=”color” value=”red” > Red < /li >
< li > < input type=”radio” name=”color” value=”green” > Green < /li >
< li > < input type=”radio” name=”color” value=”blue” > Blue < /li >
< /ul >
< /form >
The form in this HTML has three radio controls that have “ color ” as their name , which ties the fields
together. When accessing elements[ “ color “ ] , a NodeList is returned, containing all three elements;
when accessing elements[0] , however, only the first element is returned. Consider this example:
var form = document.getElementById(“myForm”);
var colorFields = form.elements[“color”];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField);
//true
This code shows that the first form field, accessed via form.elements[0] , is the same as the first
element contained in form.elements[ “ color “ ] .
It ’ s possible to access elements as properties of a form as well, such as form[0] to get the first form field
and form[ “ color “ ] to get a named field. These properties always return the same thing as their
equivalent in the elements collection. This approach is provided for backwards compatibility with
older browsers and should be avoided when possible in favor of using elements .
Common Form - Field Properties
With the exception of the < fieldset > element, all form fields share a common set of properties. Since
the < input > type represents many form fields, some properties are used only with certain field types,
whereas others are used regardless of the field type. The common form - field properties and methods are
as follows:
❑
❑
❑
❑
❑
❑
❑
disabled — A Boolean indicating if the field is disabled.
form — A pointer to the form that the field belongs to. This property is read only.
name — The name of the field.
readOnly — A Boolean indicating if the field is read only.
tabIndex — Indicates the tab order for the field.
type — The type of the field: “ checkbox ” , “ radio ” , and so on.
value — The value of the field that will be submitted to the server. For file - input fields, this
property is read only and simply contains the file ’ s path on the computer.
437