> For the complete documentation index, see [llms.txt](https://andersenlab.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://andersenlab.gitbook.io/javascript/js-in-browser/controls.md).

# Controls

Элементы управления, такие как`<form>`,`<input>`и другие имеют большое количество своих важных свойств и ссылок.

## Псевдомассив form.elements

Элементы`FORM`можно получить по имени или номеру, используя свойство`document.forms[name/index]`.

Например:

```javascript
document.forms.my -- форма с именем 'my'
document.forms[0] -- первая форма в документе
```

**Любой&#x20;*****элемент*****&#x20;формы**`form`**можно получить аналогичным образом, используя свойство**`form.elements`**.**

![](https://2092265233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBf9m3kmqHMEm-R65Ng%2F-LBff3SPmEmjAYrDOftn%2F-LBffDPsa052eIP8b12t%2Fform.png?generation=1525446143742131\&alt=media)

Например:

```
<body>
  <form name="my">
    <input name="one" value="1">
    <input name="two" value="2">
  </form>

  <script>
    var form = document.forms.my; // можно document.forms[0]

    var elem = form.elements.one; // можно form.elements[0]

    alert( elem.value ); // 1
  </script>
</body>
```

**Может быть несколько элементов с&#x20;*****одинаковым именем*****. В таком случае**`form.elements[name]`**вернет коллекцию элементов**, например:

```
<body>
<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
var form = document.forms[0];

var elems = form.elements.age;

alert(elems[0].value); // 10, первый input
</script>
</body>
```

Эти ссылки не зависят от окружающих тегов. Элемент может быть «зарыт» где-то глубоко в форме, но он все равно доступен через`form.elements`.

**Свойство**`elements`**также есть у элементов**`<fieldset>`**.** Вот пример:

```
<body>
  <form>
    <fieldset name="set">
      <legend>fieldset</legend>
      <input name="text" type="text">
    </fieldset>
  </form>

  <script>
    var form = document.forms[0];

    alert( form.elements.text ); // INPUT
    alert( form.elements.set.elements.text ); // INPUT
  </script>
</body>
```

## Элемент label

Элемент`label`– один из самых важных в формах.

**Клик на**`label`**засчитывается как фокусировка или клик на элементе формы, к которому он относится.**

Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике`input type=checkbox`(`radio`). Конечно, это очень удобно.

Есть два способа показать, какой элемент относится к`label`:

Дать метке атрибут`for`, равный`id`соответствующего`input`:

```
<table>
  <tr>
    <td>
      <label for="agree">Согласен с правилами</label>
    </td>
    <td>
      <input id="agree" type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <label for="not-a-robot">Я не робот</label>
    </td>
    <td>
      <input id="not-a-robot" type="checkbox">
    </td>
  </tr>
</table>
```

Завернуть элемент в`label`. В этом случае можно обойтись без дополнительных атрибутов:

```
<label>Кликни меня <input type="checkbox"></label>
```
