Один из способов взаимодействия с пользователями представляют html-формы. Например, если нам надо получить от пользователя некоторую информацию, мы можем определить на веб-странице формы, которая будет содержать текстовые поля для ввода информации и кнопку для отправки. И после ввода данных мы можем обработать введенную информацию.
Получение формы
Первый способ заключается в прямом обращении по имени формы:
const searchForm = document.search;
Второй способ состоит в обращении к коллекции форм документа — коллекция forms и поиске в ней нужной формы:
const collection = document.forms
Третий способ представляет получение форм стандартными методами для поиска элемента по id, по тегу или по селектору. Например:
const formById = document.getElementById("search");
const formByName = document.getElementsByName("search")[0];
const formBySelector = document.querySelector("form");
Свойства и методы форм
Форма имеет ряд свойств, из которых перечислю основные:
name: имя формы
elements: коллекция элементов формы
length: количество элементов формы
action: значение атрибута
action— адрес отправки формыmethod: значение атрибута
method— метод HTTP, применяемый для отправки
Свойства элементов форм
Все они имеют ряд общих свойств и методов. Также, как и форма, элементы форм имеют свойство name, с помощью которого можно получить значение атрибута name. Другим важным свойством является свойство value, которое позволяет получить или изменить значение поля:
<form name="search">
<input type="text" name="key" value="hello world"></input>
<input type="submit" name="send"></input>
</form>
<script>
const form = document.getElementById("search");
// получение поля формы по имени
const keyField = form.elements["key"];
// получение значения поля
console.log(keyField.value);
// установка значения поля
keyField.value = "Enter a string";
</script>
Кнопки
Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент button:
<button name="send">Отправить</button>
Либо элемент input:
<input type="submit" name="send" value="Отправить" />
При нажатии на любой из этих двух вариантов кнопки происходит отправка формы по адресу, который указан у формы в атрибуте action, либо по адресу веб-страницы, если атрибут action не указан. Однако в коде javascript мы можем перехватить отправку, обрабатывая событие click
Текстовые поля
Для ввода простейшей текстовой информации предназначены элементы <input type="text":
<input type="text" name="kye" size="10" maxlength="15" value="hello world" />
Данный элемент поддерживает ряд событий, в частности:
focus: происходит при получении фокусаblur: происходит при потере фокусаchange: происходит при изменении значения поляinput: происходит при изменении значения поляselect: происходит при выделении текста в текстовом полеkeydown: происходит при нажатии клавиши клавиатурыkeypress: происходит при нажатии клавиши клавиатуры для печатаемых символовkeyup: происходит при отпускании ранее нажатой клавиши клавиатуры