Form properties and methods

Forms and control elements, such as have a lot of special properties and events. Working with forms will be much more convenient when we learn them.

Navigation: form and elements

Document forms are members of the special collection document.forms. That’s a so-called “named collection”: it’s both named and ordered. We can use both the name or the number in the document to get the form. When we have a form, then any element is available in the named collection form.elements. For instance: There may be multiple elements with the same name. This is typical with radio buttons and checkboxes. In that case, form.elements[name] is a collection. For instance: These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in form.elements.

Backreference: element.form

For any element, the form is available as element.form. So a form references all elements, and elements reference the form. Here’s the picture: For instance:

Form elements

Let’s talk about form controls.

input and textarea

We can access their value as input.value (string) or input.checked (boolean) for checkboxes and radio buttons. Like this:

select and option

A element has 3 important properties: 1. select.options – the collection of subelements, 2. select.value – the value of the currently selected , 3. select.selectedIndex – the number of the currently selected . They provide three different ways of setting a value for a : 1. Find the corresponding element (e.g. among select.options) and set its option.selected to true. 2. If we know a new value: set select.value to the new value. 3. If we know the new option number: set select.selectedIndex to that number. Here is an example of all three methods: Unlike most other controls, allows to select multiple options at once if it has multiple attribute. This attribute is rarely used, though. For multiple selected values, use the first way of setting values: add/remove the selected property from subelements. Here’s an example of how to get selected values from a multi-select: The full specification of the element is available in the specification https://html.spec.whatwg.org/multipage/forms.html#the-select-element.

new Option

option.selected

Is the option selected. option.index

The number of the option among the others in its . option.text

Text content of the option (seen by the visitor).

References

• Specification: https://html.spec.whatwg.org/multipage/forms.html.

  Summary

  Form navigation: document.forms

A form is available as document.forms[name/index]. form.elements

Form elements are available as form.elements[name/index], or can use just form[name/index]. The elements property also works for

. element.form

Elements reference their form in the form property. Value is available as input.value, textarea.value, select.value, etc. (For checkboxes and radio buttons, use input.checked to determine whether a value is selected.) For

, one can also get the value by the index select.selectedIndex or through the options collection select.options. These are the basics to start working with forms. We’ll meet many examples further in the tutorial. In the next chapter we’ll cover focus and blur events that may occur on any element, but are mostly handled on forms.

document.forms.my; // the form with name="my"
document.forms[0]; // the first form in the document