Формы и их события
Навигация и обработка элементов форм
Управление фокусировкой
События форм
Обучающие курсы
Python Python ООП Структуры данных Django C/C++
Телеграм-каналы
Канал selfedu_rus Python Django Машинное обучение Java и С++
Наш канал

Навигация и обработка элементов форм

На этом занятии поговорим о способах навигации по элементам форм и доступу к их значениям. Для начала предположим, что у нас имеется вот такой документ с формой:

<!DOCTYPE html>
<html>
<head>
<title>Уроки по JavaScript</title>
</head>
<body>
<form name="reg">
<p><input name="user" value="" />
<p><input name="sex" type="radio" checked />М 
<input name="sex" type="radio" />Ж
<p>Город: <select name="city">
<option>Москва</option>
<option>Санкт-Петербург</option>
<option>Тверь</option>
</select>
<p>Согласие <input name="agree" type="checkbox" />
<p><textarea name="about" rows="10" cols="30">О себе</textarea>
<p><input type="submit" name="submit">
</form>
<script>
</script>
</body>
</html>

И мы хотим получить доступ к форме в нашем скрипте. Для этого можно использовать специальную коллекцию

document.forms

которая содержит все формы текущего HTML-документа. В данном случае эта коллекция будет содержать один элемент (одну форму), к которой можно обратиться либо по индексу (отсчет начинается с индекса 0):

let frm = document.forms[0];

или по имени формы (указанное в атрибуте name):

let frm = document.forms.reg;
console.dir(frm);

Каждый элемент формы, в свою очередь, доступен через коллекцию

form.elements

например, так:

let user = frm.elements[0];
console.dir(user);

или по имени (по значению атрибута name):

let user = frm.elements.user;

Обратите внимание, что теги, не относящиеся к элементам формы, игнорируются. У нас это тег <p>.

В случае, если имеется несколько элементов с одинаковым именем (в нашем случае – это значение sex для выбора пола пользователя), то возвращается коллекция соответствующих элементов:

let sex = frm.elements.sex;
console.dir(sex);

И, далее, к каждому конкретному элементу можно обратиться по индексу:

console.dir(sex[0]);

В JavaScript допускается использовать более короткую запись для доступа к элементам формы согласно синтаксису:

form[index/name]

Например, так:

let user = frm[0];
let sex = frm.sex;
console.dir(sex);

Результат будет тем же. Также внутри формы можно использовать подформы, заданные тегом

<fieldset>[элементы подформы]</fieldset>

Например:

<fieldset name="info">
<p>Согласие <input name="agree" type="checkbox" />
<p><textarea rows="10" cols="30">О себе</textarea>
</fieldset>

Тогда внутри формы мы можем обратиться целиком к этому фрагменту следующим образом:

let info = frm.info;

и далее, обратиться к элементу подформы через коллекцию elements:

console.dir(info.elements[0]);
console.dir(info.elements.about);

Иногда это бывает удобно. Каждый элемент формы имеет ссылку на саму форму, которой он принадлежит:

console.dir(user.form);

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

input и textarea

У них есть следующие свойства:

input.value – значение атрибута value;
input.checked – значение атрибута checked;
textarea.value – содержимое поля textarea.

Обратите внимание, к полю textarea следует обращаться через свойство value, а не через innerHTML. Примеры:

let user = frm.user;
let sex = frm.sex;
let about = frm.about;
console.log(user.value, sex[0].checked, about.value);

Следующий тег

select

Он имеет три распространенных свойства:

select.options – коллекция из подэлементов <option>;
select.value – значение выбранного в данный момент <option>;
select.selectedIndex – номер выбранного <option>.

Посмотрим их работу на следующем примере:

console.dir(city.options);
console.log(city.value);
console.log(city.selectedIndex);

Последние два свойства доступны и для записи значений:

city.value = "Тверь";

будет выбран пункт с таким городом;

city.selectedIndex = 1;

будет выбран второй пункт списка. Но что делать, если наш список имеет режим множественного выбора:

<select name="city" multiple>

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

city.options[1].selected = true;
city.options[2].selected = true;

А так выбрать все отмеченные пункты:

let selected = Array.from(city.options)
      .filter(option => option.selected)
 
for(let c of selected)
      console.log(c);

Или, если нам нужны только города, то:

let selected = Array.from(city.options)
        .filter(option => option.selected)
        .map(option => option.value);

Вот так на уровне JavaScript выполняется навигация по формам и доступ к значениям их элементов.

Навигация и обработка элементов форм

Видео по теме