Элементы формы и их значения

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

У форм есть свой короткий путь: document.forms — коллекция всех форм страницы, и обращаться к ней можно по name или id. Внутри формы такая же коллекция полей — form.elements: по имени, по индексу, с обычным length.

Это удобнее, чем querySelector: имена полей вы всё равно пишете в разметке ради отправки на сервер, так что второго набора селекторов не требуется.

js

const form = document.forms.signup;

console.log(form.elements.email.value);
console.log(form.elements.length);
console.log(form.elements[1].name);

страница примера

Сначала предположите, что выведет код

В form.elements лежат все управляющие элементы формы. А в отправку попадают только те, у которых есть name и которые не выключены через disabled. Проверить состав отправки можно объектом FormData.

js

const f = document.getElementById("f2");

console.log(f.elements.length);
console.log([...new FormData(f)].length);

страница примера

Сначала предположите, что выведет код

У input и textarea текущее содержимое читается одинаково — через value. Для textarea это важно отдельно: текст между тегами — только начальное значение, и innerHTML после правок пользователя покажет старое. Начальное значение доступно как defaultValue.

js

const nick = document.getElementById("nick");
const bio = document.getElementById("bio");

nick.value = "neo";
console.log(nick.value);
console.log(nick.defaultValue);

bio.value = "Читаю код";
console.log(bio.value);
console.log(bio.defaultValue);

страница примера

Сначала предположите, что выведет код

Атрибут в разметке — стартовое значение, свойство — текущее. Пользователь печатает в свойство, поэтому getAttribute("value") останется прежним, а input.value скажет правду. Обратное тоже верно: setAttribute("value", ...) после первого ввода уже ничего не изменит на экране.

И главная ловушка: value — строка. Даже у type="number". Числовой вид лежит рядом, в valueAsNumber (для type="date" есть valueAsDate).

js

const qty = document.getElementById("qty");

console.log(typeof qty.value);
console.log(qty.value + 1);
console.log(qty.valueAsNumber + 1);

страница примера

Сначала предположите, что выведет код

У флажка и переключателя value тоже есть, но оно отвечает на другой вопрос: «какую строку отправить, если элемент отмечен». Само состояние — булево свойство checked, а начальное состояние из разметки — defaultChecked.

Радиокнопки с одинаковым name внутри формы собираются в RadioNodeList. У неё есть своё value — значение отмеченного элемента; записав туда строку, вы отметите нужный переключатель.

js

const form = document.getElementById("f");
const agree = document.getElementById("agree");

agree.checked = false;
console.log(agree.checked);
console.log(agree.defaultChecked);

console.log(form.elements.plan.value);
form.elements.plan.value = "free";
console.log(form.elements.plan[0].checked);

страница примера

Сначала предположите, что выведет код

Если атрибут value не задан, браузер подставляет строку on — историческое значение по умолчанию. Оно ничего не говорит о состоянии: у снятого флажка value тоже on.

js

const c1 = document.getElementById("c1");
const c2 = document.getElementById("c2");

console.log(c1.value);
console.log(c1.checked);
console.log(c2.value);

страница примера

Сначала предположите, что выведет код

У select три способа спросить об одном и том же: value — значение выбранной опции, selectedIndex — её номер, options — коллекция всех option. Запись в value выбирает опцию с таким значением, запись в selectedIndex — по номеру.

js

const city = document.getElementById("city");

console.log(city.value);
console.log(city.selectedIndex);
console.log(city.options.length);
console.log(city.options[2].text);

city.value = "kzn";
console.log(city.selectedIndex);

страница примера

Сначала предположите, что выведет код

Со списком, где разрешено несколько значений (multiple), value становится бесполезным: оно вернёт только первую выбранную опцию. Все отмеченные лежат в selectedOptions. Новую опцию удобно создавать конструктором new Option(текст, значение) и добавлять обычным append.

js

const tags = document.getElementById("tags");

console.log(tags.value);
console.log(tags.selectedOptions.length);
console.log([...tags.selectedOptions].map((o) => o.value).join(","));

tags.append(new Option("Go", "go"));
console.log(tags.options.length);

страница примера

Сначала предположите, что выведет код

Элемент	Что читать	Заметка
input type="text"	value	всегда строка
textarea	value	не innerHTML
input type="checkbox"	checked	value — строка для отправки
группа radio	form.elements.name.value	значение отмеченного
select	value, selectedIndex	для multiple — selectedOptions

Связь двусторонняя: из формы видны поля, а у каждого поля есть свойство form — ссылка на его форму. Причём элемент необязательно лежит внутри тега form: атрибут form="id-формы" присоединяет к ней поле из любого места страницы.

js

const qty = document.getElementById("qty");
const stray = document.getElementById("stray");

console.log(qty.form.id);
console.log(stray.form === qty.form);
console.log(qty.form.elements.qty.length);

страница примера

Сначала предположите, что выведет код

Практическая польза — обработчики. Из события известен элемент, из элемента — форма, из формы — все соседние поля. Не нужно ни глобальных переменных, ни поиска по документу.

js

function recalc(event) {
  const f = event.target.form;
  f.elements.total.value = Number(f.elements.price.value) * Number(f.elements.count.value);
}

const price = document.forms.calc.elements.price;
price.addEventListener("input", recalc);

price.value = "200";
price.dispatchEvent(new Event("input"));
console.log(document.forms.calc.elements.total.value);

страница примера

Сначала предположите, что выведет код

К форме и её полям есть короткий путь по именам: document.forms.имя, затем form.elements.имя. Работает и по id, и по индексу.
value — всегда строка и всегда текущее значение. Начальное значение из разметки лежит отдельно, в defaultValue; для чисел есть valueAsNumber.
У чекбокса и радио состояние — это checked, а value лишь строка для отправки (по умолчанию on). Значение отмеченного переключателя даёт form.elements.имя.value.
У select читают value, selectedIndex и options; для multiple единственный честный источник — selectedOptions.
Свойство element.form ведёт от поля обратно к форме — даже если поле лежит вне тега form и присоединено атрибутом form="id".

1/3В разметке было <input id="nick" value="rico">. Выполнили input.value = "neo". Что вернёт input.getAttribute("value")?

2/3В форме два радио с name="plan" и значениями free и pro, отмечен pro. Что вернёт form.elements.plan.value?

3/3У <select multiple> три опции, выбраны первая и третья. Что даст select.value?

Сводка по форме

Напишите функцию summary(form), которая собирает строку вида nick=rico;subscribe=true;level=pro: имя поля, знак равенства, значение. Для чекбокса значением считается true или false, для остальных — value. Порядок — как в разметке.

js

function summary(form) {
  // ваш код
}

console.log(summary(document.forms.profile)); // nick=rico;subscribe=true;level=pro

страница примера

Сначала предположите, что выведет код

Коллекция form.elements перебирается как массив, а тип элемента подсказывает свойство type: у чекбокса это checkbox, у выпадающего списка — select-one.

jsлистинг · не запускается

function summary(form) {
  return [...form.elements]
    .map((el) => {
      const value = el.type === "checkbox" ? el.checked : el.value;
      return el.name + "=" + value;
    })
    .join(";");
}

function summary(form) {
  return [...form.elements]
    .map((el) => {
      const value = el.type === "checkbox" ? el.checked : el.value;
      return el.name + "=" + value;
    })
    .join(";");
}

Обратите внимание: у чекбокса намеренно берётся checked, а не value — иначе для снятого флажка вышло бы subscribe=on. Если бы в форме встретились поля без name, их стоило бы отфильтровать: .filter((el) => el.name).

Переключатель «выбрать все»

В форме четыре чекбокса: master и три обычных. Сделайте так, чтобы переключение master выставляло всем остальным то же состояние. Сам master в цикле пропускают: остальным присваивают его состояние, а ему самому присваивать уже нечего.

js

const form = document.forms.opts;
const master = form.elements.master;

// ваш код

master.click();
console.log([...form.elements].filter((el) => el.checked).length); // 4

страница примера

Сначала предположите, что выведет код

Событие change у чекбокса срабатывает и при программном click(), так что проверить решение можно без участия пользователя.

jsлистинг · не запускается

master.addEventListener("change", () => {
  for (const el of form.elements) {
    if (el !== master) el.checked = master.checked;
  }
});

master.click();
console.log([...form.elements].filter((el) => el.checked).length); // 4

master.click();
console.log([...form.elements].filter((el) => el.checked).length); // 0

master.addEventListener("change", () => {
  for (const el of form.elements) {
    if (el !== master) el.checked = master.checked;
  }
});

master.click();
console.log([...form.elements].filter((el) => el.checked).length); // 4

master.click();
console.log([...form.elements].filter((el) => el.checked).length); // 0

Второй клик снимает всё, включая ранее отмеченный b: обработчик копирует состояние мастера, а не переключает каждый флажок по отдельности.

Элементы формы и их значения

Видеоразбор темы за 5–7 минут

Как добраться до полейdocument.forms, elements и имена полей

Свойство value у input и textareaВсегда строка, даже у number

checked у чекбоксов и радиоСостояние читают не через value

select и его optionsvalue, selectedIndex и список опций

Свойство form у элементаОбратная ссылка от поля к форме

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Сводка по форме

Переключатель «выбрать все»