Работа с формой

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

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

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

document.forms.my 
- форма с именем 'my'

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

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

Может быть несколько элементов с одинаковым именем. В таком случае form.elements[name]вернет коллекцию элементов

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



let form = document.forms[0];
let elems = form.elements.age;

console.log(elems[0].value); // 10, первый input

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

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


let form = document.forms[0];
let elem = form.elements.surname;

console.log(elem.form == form); // true

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

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

Есть два способа показать, какой элемент относится к 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>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

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

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

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


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

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

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

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

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

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

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

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

Если 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>
let form = document.forms[0];
let select = form.elements.genre;

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

События focus/blur

Событие focus вызывается тогда, когда пользователь фокусируется на элементе, а blur – когда фокус исчезает, например посетитель кликает на другом месте экрана.

<style> .error { border-color: red; } </style>

Введите ваш возраст: <input type="text" id="input">

<div id="error"></div>

<script>
input.onblur = function() {
  if (isNaN(this.value)) { // введено не число
    // показать ошибку
    this.className = "error";
    error.innerHTML = 'Вы ввели не число. Исправьте, пожалуйста.'
  }
};

input.onfocus = function() {
  if (this.className == 'error') {
 // сбросить состояние "ошибка", если оно есть
    this.className = "";
    error.innerHTML = "";
  }
};
</script>