# Навигация и свойства элементов формы
Элементы управления, такие как `
```
**Может быть несколько элементов с *одинаковым именем*. В таком случае `form.elements[name]` вернет коллекцию элементов**, например:
```html
```
Эти ссылки не зависят от окружающих тегов. Элемент может быть "зарыт" где-то глубоко в форме, но он всё равно доступен через `form.elements`.
**Свойство `elements` также есть у элементов ``.**
Вот пример:
```html
```
Спецификация: [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
[warn header="Доступ `form.name` тоже работает, но с особенностями"]
Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`.
Этот способ короче, так как обладает одной неприятной особенностью: если к элементу обратиться по его `name`, а потом свойство `name` изменить, то он по-прежнему будет доступен под старым именем.
Звучит странно, поэтому посмотрим на примере.
```html
```
[/warn]
## Ссылка на форму element.form
**По элементу можно получить его форму, используя свойство `element.form`.**
Пример:
```html
```
Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
## Элемент label
Элемент `label` -- один из самых важных в формах.
**Клик на `label` засчитывается как фокусировка или клик на элементе формы, к которому он относится.**
Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике `input type=checkbox` (`radio`). Конечно, это очень удобно.
Есть два способа показать, какой элемент относится к `label`:
Дать метке атрибут `for`, равный `id` соответствующего `input`:
```html
```
Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов:
```html
Кликни меня
```
## Элементы input и textarea
**Для большинства типов `input` значение ставится/читается через свойство `value`.**
```js
input.value = "Новое значение";
textarea.value = "Новый текст";
```
[warn header="Не используйте `textarea.innerHTML`"]
Для элементов `textarea` также доступно свойство `innerHTML`, но лучше им не пользоваться: оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.
[/warn]
Исключения -- `input type="checkbox"` и `input type="radio"`
**Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).**
```js
if (input.checked) {
alert("Чекбокс выбран");
}
```
## Элементы select и option
**Селект в JavaScript можно установить двумя путями: поставив значение `select.value`, либо установив свойство `select.selectedIndex` в номер нужной опции**:
```js
select.selectedIndex = 0; // первая опция
```
Установка `selectedIndex = -1` очистит выбор.
**Список элементов-опций доступен через `select.options`.**
Если `select` допускает множественный выбор (атрибут `multiple`), то значения можно получить/установить, сделав цикл по `select.options`. При этом выбранные опции будут иметь свойство `option.selected = true`.
Пример:
```html
```
Спецификация: HTMLSelectElement .
[smart header="`new Option`"]
В стандарте [the Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
```js
option = new Option( text, value, defaultSelected, selected);
```
Параметры:
`text` -- содержимое,
`value` -- значение,
`defaultSelected` и `selected` поставьте в `true`, чтобы сделать элемент выбранным.
Его можно использовать вместо `document.createElement('option')`, например:
```js
var option = new Option("Текст", "value");
// создаст Текст
```
Такой же элемент, но выбранный:
```js
var option = new Option("Текст", "value", true, true);
```
[/smart]
[smart header="Дополнительные свойства `option`"]
У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [The Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element)):
`selected`
выбрана ли опция
`index`
номер опции в списке селекта
`text`
Текстовое содержимое опции (то, что видит посетитель).
[/smart]
## Итого
Свойства для навигации по формам:
`document.forms`
Форму можно получить как document.forms[name/index].
`form.elements`
Элементы в форме: form.elements[name/index]. Каждый элемент имеет ссылку на форму в свойстве `form`. Свойство `elements` также есть у ``.
Значение элементов читается/ставится через `value` или `checked`.
Для элемента `select` можно задать опцию по номеру через `select.selectedIndex` и перебрать опции через `select.options`. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство `option.selected = true`.