Forms and control elements, such as
<input> have a lot of special properties and events.
Working with forms will be much more convenient when we learn them.
Document forms are members of the special collection
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.
document.forms.my - the form with name="my" document.forms - the first form in the document
When we have a form, then any element is available in the named collection
There may be multiple elements with the same name, that’s often the case with radio buttons.
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
A form may have one or many
<fieldset> elements inside it. They also have
elements property that lists form controls inside them.
<body> <form id="form"> <fieldset name="userFields"> <legend>info</legend> <input name="login" type="text"> </fieldset> </form> <script> alert(form.elements.login); // <input name="login"> let fieldset = form.elements.userFields; alert(fieldset); // HTMLFieldSetElement // we can get the input by name both from the form and from the fieldset alert(fieldset.elements.login == form.elements.login); // true </script> </body>
There’s a shorter notation: we can access the element as
In other words, instead of
form.elements.login we can write
That also works, but there’s a minor issue: if we access an element, and then change its
name, then it is still available under the old name (as well as under the new one).
That’s easy to see in an example:
<form id="form"> <input name="login"> </form> <script> alert(form.elements.login == form.login); // true, the same <input> form.login.name = "username"; // change the name of the input // form.elements updated the name: alert(form.elements.login); // undefined alert(form.elements.username); // input // form allows both names: the new one and the old one alert(form.username == form.login); // true </script>
That’s usually not a problem, because we rarely change names of form elements.
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:
Let’s talk about form controls.
We can access their value as
input.value (string) or
input.checked (boolean) for checkboxes.
input.value = "New value"; textarea.value = "New text"; input.checked = true; // for a checkbox or radio button
Please note that even though
<textarea>...</textarea> holds its value as nested HTML, we should never use
textarea.innerHTML to access it.
It stores only the HTML that was initially on the page, not the current value.
<select> element has 3 important properties:
select.options– the collection of
select.value– the value of the currently selected
select.selectedIndex– the number of the currently selected
They provide three different ways of setting a value for a
- Find the corresponding
<option>element and set
select.valueto the value.
select.selectedIndexto the number of the option.
The first way is the most obvious, but
(3) are usually more convenient.
Here is an example:
Unlike most other controls,
<select> allows to select multiple options at once if it has
multiple attribute. That’s feature is rarely used. In that case we need to use the first way: add/remove the
selected property from
We can get their collection as
select.options, for instance:
<select id="select" multiple> <option value="blues" selected>Blues</option> <option value="rock" selected>Rock</option> <option value="classic">Classic</option> </select> <script> // get all selected values from multi-select let selected = Array.from(select.options) .filter(option => option.selected) .map(option => option.value); alert(selected); // blues,rock </script>
The full specification of the
<select> element is available in the specification https://html.spec.whatwg.org/multipage/forms.html#the-select-element.
This is rarely used on its own. But there’s still an interesting thing.
In the specification there’s a nice short syntax to create
option = new Option(text, value, defaultSelected, selected);
text– the text inside the option,
value– the option value,
selectedHTML-attribute is created,
true, then the option is selected.
There may be a small confusion about
selected. That’s simple:
defaultSelected sets HTML-attribute, that we can get using
selected – whether the option is selected or not, that’s more important. Usually both values are either set to
true or not set (same as
let option = new Option("Text", "value"); // creates <option value="value">Text</option>
The same element selected:
let option = new Option("Text", "value", true, true);
Option elements have properties:
- Is the option selected.
- The number of the option among the others in its
- Text content of the option (seen by the visitor).
- Specification: https://html.spec.whatwg.org/multipage/forms.html.
- A form is available as
- Form elements are available as
form.elements[name/index], or can use just
elementsproperty also works for
- Elements reference their form in the
Value is available as
select.value etc, or
input.checked for checkboxes and radio buttons.
<select> we can also get the value by the index
select.selectedIndex or through the options collection
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
blur events that may occur on any element, but are mostly handled on forms.