# 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 ` `.
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:
```html run
Apple
Pear
Banana
```
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:
```html run
Blues
Rock
Classic
```
The full specification of the `` element is available in the specification .
### new Option
In the [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create an `` element:
```js
option = new Option(text, value, defaultSelected, selected);
```
This syntax is optional. We can use `document.createElement('option')` and set attributes manually. Still, it may be shorter, so here are the 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.
The difference between `defaultSelected` and `selected` is that `defaultSelected` sets the HTML-attribute (that we can get using `option.getAttribute('selected')`, while `selected` sets whether the option is selected or not.
In practice, we usually should set both values to `true` or `false` (or omit, that's the same as `false`).
For instance, here's a new "unselected" option:
```js
let option = new Option("Text", "value");
// creates Text
```
The same option, but 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.