Формы и их элементы
Один из способов взаимодействия с пользователями представляют html-формы. Например, если нам надо получить от пользователя некоторую информацию, мы можем определить на веб-странице формы, которая будет содержать текстовые поля для ввода информации и кнопку для отправки. И после ввода данных мы можем обработать введенную информацию.
Для создания формы используется элемент <form>:
<form name="search">
</form>В JavaScript форма представлена объектом HtmlFormElement. И после создания формы мы можем к ней обратиться различными способами.
Первый способ заключается в прямом обращении по имени формы:
var searchForm = document.search;Второй способ состоит в обращении к коллекции форм документа и поиске в ней нужной формы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form name="search"></form>
<form name="settings"></form>
<script>
var searchForm;
for (var i = 0; i < document.forms.length; i++) {
if(document.forms[i].name==="search")
searchForm = document.forms[i];
}
document.write(searchForm.name);
</script>
</body>
</html>С помощью свойства name объекта формы мы можем получить значение атрибута name у соответствующего элемента формы в коде html.
Еще один способ сочетает оба подхода:
var searchForm = document.forms["search"];И также можно применять стандартные способы для поиска элемента формы, по id, по тегу или по селектору:
var searchForm = document.getElementsByTagname("form")[0]Форма имеет ряд свойств, из которых наиболее важными являются вышерассмотренное свойство name, а также свойство elements, которое содержит коллекцию элементов формы:
<form name="search">
<input type="text" name="key"></input>
<input type="submit" name="send"></input>
</form>
<script>
var searchForm = document.forms["search"];
for(var i=0; i<searchForm.elements.length;i++)
document.write(searchForm.elements[i].name + "<br/>");
</script>Среди методов формы надо отметить метод submit(), который отправляет данные формы на сервер, и метод reset(), который очищает поля формы:
var searchForm = document.forms["search"];
searchForm.submit();
searchForm.reset();Элементы форм
Форма может содержать различные элементы ввода html: input, textarea, button, select и т.д. Но все они имеют ряд общих свойств и методов.
Как и форма, элементы форм имеют свойство name, с помощью которого можно получить значение атрибута name:
<form name="search">
<input type="text" name="key" value="hello world"></input>
<input type="submit" name="send"></input>
</form>
<script>
var searchForm = document.forms["search"];
// выведем имя всех элементов
for(var i=0; i<searchForm.elements.length;i++)
document.write(searchForm.elements[i].name + "<br/>");
// получим по имени текстовое поле
var keyBox = searchForm.elements["key"];
document.write(keyBox.name); // key
</script>Другим важным свойством является свойство value, которое позволяет получить или изменить значение поля:
var searchForm = document.forms["search"];
var keyBox = searchForm.elements["key"];
document.write(keyBox.value); // hello world
// установка значения
keyBox.value = "Привет мир";С помощью свойства form можно получить родительский объект формы:
var searchForm = document.forms["search"];
var keyBox = searchForm.elements["key"];
document.write(keyBox.form.name); // searchДанное свойство может быть полезно, например, при отправке формы, когда перед непосредственной отправкой формы необходимо провести валидацию всех полей формы.
Свойство type позволяет получить тип поля ввода. Это либо название тега элемента, либо значение атрибута type у элементов input.
Из методов можно выделить методы focus() устанавливает фокус на элемент и blur() убирает фокус с элемента:
var searchForm = document.forms["search"];
var keyBox = searchForm.elements["key"];
keyBox.focus();