# Form properties and methods
Forms and control elements, such as `` elements inside it. They also have `elements` property that lists form controls inside them.
For instance:
```html run height=80
```
````
````warn header="Shorter notation: `form.name`"
There's a shorter notation: we can access the element as `form[index/name]`.
In other words, instead of `form.elements.login` we can write `form.login`.
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:
```html run height=40
```
That's usually not a problem, because we rarely change names of 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:
```html run height=40
```
## 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.
Like this:
```js
input.value = "New value";
textarea.value = "New text";
input.checked = true; // for a checkbox or radio button
```
```warn header="Use `textarea.value`, not `textarea.innerHTML`"
Please note that even though `` 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 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 ` `.
So we have three ways to set the value of a ``, that do the same:
1. Find the corresponding `` element and set `option.selected` to `true`.
2. Set `select.value` to the value.
3. Set `select.selectedIndex` to the number of the option.
The first way is the most obvious, but `(2)` and `(3)` are usually more convenient.
Here is an example:
```html run
Apple
Pear
Banana
```
Unlike most other controls, `` 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 ways: add/remove the `selected` property from `` subelements.
We can get their collection as `select.options`, for instance:
```html run
Blues
Rock
Classic
```
The full specification of the `` element is available in the specification .
### new Option
This is rarely used on its own. But there's still an interesting thing.
In the [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `` elements:
```js
option = new Option(text, value, defaultSelected, selected);
```
Parameters:
- `text` -- the text inside the option,
- `value` -- the option value,
- `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
- `selected` -- if `true`, then the option is selected.
There may be a small confusion about `defaultSelected` and `selected`. That's simple: `defaultSelected` sets HTML-attribute, that we can get using `option.getAttribute('selected')`. And `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 `false`).
For instance:
```js
let option = new Option("Text", "value");
// creates Text
```
The same element selected:
```js
let option = new Option("Text", "value", true, true);
```
Option elements have properties:
`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: .
## 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, or `input.checked` for checkboxes and radio buttons.
For `` we 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.