Навигация и свойства элементов формы

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

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

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

Например:

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

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

Например:

<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>

Может быть несколько элементов с одинаковым именем. В таком случае 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>

Спецификация: HTML5 Forms.

Доступ form.name тоже работает, но с особенностями

Получить доступ к элементам формы можно не только через form.elements[name/index], но и проще: form[index/name].

Этот способ короче, но обладает одной неприятной особенностью: если к элементу обратиться по его name, а потом свойство name изменить, то он по-прежнему будет доступен под старым именем.

Звучит странно, поэтому посмотрим на примере.

<form name="myform">
  <input name="text">
</form>

<script>
  var form = document.forms.myform;

  alert( form.elements.text == form.text ); // true, это тот самый INPUT

  form.text.name = "new-name"; // меняем name ему

  // нет больше элемента с таким именем
  alert( form.elements.text ); // undefined

  alert( form.text ); //  INPUT (а должно быть undefined!)
</script>

Ссылка на форму element.form

По элементу можно получить его форму, используя свойство element.form.

Пример:

<body>
<form>
  <input type="text" name="surname">
</form>

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

var elem = form.elements.surname;

alert(elem.form == form); // true
</script>
</body>

Познакомиться с другими свойствами элементов можно в спецификации HTML5 Forms.

Элемент label

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

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

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

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

  1. Дать метке атрибут 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>
  2. Завернуть элемент в label. В этом случае можно обойтись без дополнительных атрибутов:

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

Элементы input и textarea

Для большинства типов input значение ставится/читается через свойство value.

input.value = "Новое значение";
textarea.value = "Новый текст";
Не используйте textarea.innerHTML

Для элементов textarea также доступно свойство innerHTML, но лучше им не пользоваться: оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.

Исключения – input type="checkbox" и input type="radio"

Текущее «отмеченное» состояние для checkbox и radio находится в свойстве checked (true/false).

if (input.checked) {
  alert( "Чекбокс выбран" );
}

Элементы select и option

Селект в JavaScript можно установить двумя путями: поставив значение select.value, либо установив свойство select.selectedIndex в номер нужной опции.:

select.selectedIndex = 0; // первая опция

Установка selectedIndex = -1 очистит выбор.

Список элементов-опций доступен через select.options.

Если select допускает множественный выбор (атрибут multiple), то значения можно получить/установить, сделав цикл по select.options. При этом выбранные опции будут иметь свойство option.selected = true.

Пример:

<form name="form">
  <select name="genre" multiple>
    <option value="blues" selected>Мягкий блюз</option>
    <option value="rock" selected>Жёсткий рок</option>
    <option value="classic">Классика</option>
  </select>
</form>

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

for (var i = 0; i < select.options.length; i++) {
  var option = select.options[i];
  if(option.selected) {
    alert( option.value );
  }
}
</script>

Спецификация: the select element.

new Option

В стандарте the option element есть любопытный короткий синтаксис для создания элемента с тегом option:

option = new Option(text, value, defaultSelected, selected);

Параметры:

  • text – содержимое,
  • value – значение,
  • defaultSelected и selected поставьте в true, чтобы сделать элемент выбранным.

Его можно использовать вместо document.createElement('option'), например:

var option = new Option("Текст", "value");
// создаст <option value="value">Текст</option>

Такой же элемент, но выбранный:

var option = new Option("Текст", "value", true, true);
Дополнительные свойства option

У элементов option также есть особые свойства, которые могут оказаться полезными (см. the option element):

selected
выбрана ли опция
index
номер опции в списке селекта
text
Текстовое содержимое опции (то, что видит посетитель).

Итого

Свойства для навигации по формам:

document.forms
Форму можно получить как document.forms[name/index].
form.elements
Элементы в форме: form.elements[name/index]. Каждый элемент имеет ссылку на форму в свойстве form. Свойство elements также есть у <fieldset>.

Значение элементов читается/ставится через value или checked.

Для элемента select можно задать опцию по номеру через select.selectedIndex и перебрать опции через select.options. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство option.selected = true.

Задачи

важность: 5

Есть селект:

<select>
  <option value="Rock">Рок</option>
  <option value="Blues" selected>Блюз</option>
</select>

При помощи JavaScript:

  1. Выведите значение и текст текущей выбранной опции.
  2. Добавьте опцию: <option value="Classic">Классика</option>.
  3. Сделайте её выбранной.

Решение:

<select>
  <option value="Rock">Рок</option>
  <option value="Blues" selected>Блюз</option>
</select>

<script>
  var select = document.body.children[0];

  // 1)
  var selectedOption = select.options[select.selectedIndex];
  alert( selectedOption.value );

  // 2)
  var newOption = new Option("Classic", "Классика");
  select.appendChild(newOption);

  // 3)
  newOption.selected = true;
</script>
Карта учебника

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.