Свойства и методы формы
Формы и элементы управления, такие как , имеют множество специальных свойств и событий.
Работать с формами станет намного удобнее, когда мы их изучим.
Навигация: формы и элементы
Формы в документе входят в специальную коллекцию document.forms .
Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.
document.forms.my - форма с именем "my" (name="my") document.forms[0] - первая форма в документеКогда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .
Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .
В этом случае form.elements[name] является коллекцией, например:
Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .
Форма может содержать один или несколько элементов внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.
Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .
Другими словами, вместо form.elements.login мы можем написать form.login .
Это также работает, но есть небольшая проблема: если мы получаем элемент, а затем меняем его свойство name , то он всё ещё будет доступен под старым именем (также, как и под новым).
В этом легче разобраться на примере:
Обычно это не вызывает проблем, так как мы редко меняем имена у элементов формы.
Обратная ссылка: element.form
Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.
Элементы формы
Рассмотрим элементы управления, используемые в формах.
input и textarea
К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.
input.value = "Новое значение"; textarea.value = "Новый текст"; input.checked = true; // для чекбоксов и переключателейОбратим внимание: хоть элемент и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.
Там хранится только тот HTML, который был изначально на странице, а не текущее значение.
select и option
Элемент имеет 3 важных свойства:
- select.options – коллекция из подэлементов ,
- select.value – значение выбранного в данный момент ,
- select.selectedIndex – номер выбранного .
Они дают три разных способа установить значение в :
- Найти соответствующий элемент и установить в option.selected значение true .
- Установить в select.value значение нужного .
- Установить в select.selectedIndex номер нужного .
Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.
Вот эти способы на примере:
В отличие от большинства других элементов управления, позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple . Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов .
Их коллекцию можно получить как select.options , например:
new Option
Элемент редко используется сам по себе, но и здесь есть кое-что интересное.
В спецификации есть красивый короткий синтаксис для создания элемента :
option = new Option(text, value, defaultSelected, selected);- text – текст внутри ,
- value – значение,
- defaultSelected – если true , то ставится HTML-атрибут selected ,
- selected – если true , то элемент будет выбранным.
Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).
let option = new Option("Текст", "value"); // создаст Тот же элемент, но выбранный:
let option = new Option("Текст", "value", true, true);option.selected Выбрана ли опция. option.index Номер опции среди других в списке . option.value Значение опции. option.text Содержимое опции (то, что видит посетитель).
Ссылки
Итого
Свойства для навигации по формам:
document.forms Форма доступна через document.forms[name/index] . form.elements Элементы формы доступны через form.elements[name/index] , или можно просто использовать form[name/index] . Свойство elements также работает для . element.form Элементы хранят ссылку на свою форму в свойстве form .
Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.
Для элемента мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .
Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.
В следующей главе мы рассмотрим такие события, как focus и blur , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.
Формы ввода данных в JavaScript
О формах в JavaScript можно рассказывать очень долго. В книгах по этому языку данному вопросу посвящены целые разделы. Поэтому данная статья — лишь краткий обзор. Хотя возможно, что я ещё буду возвращаться к этой теме.
Ну а если хотите всё и сразу, то вам сюда:
В сценариях JavaScript большее внимание уделяется не передаче и обработке данных формы, а обработке событий. Форма и все расположенные на ней элементы ввода имеют обработчики событий, позволяющие программировать действия, выполняемые сценарием в ответ на взаимодействие пользователя с формой. Если пользователь, например, щелкает на кнопке или вводит текст в поле, то программа JavaScript может получить уведомление через обработчик события и отреагировать на него, изменив значение, отображаемое в каком-либо другом элементе формы.
При этом вовсе не обязательно отправлять данные на сервер. Например, программой может быть калькулятор, который обрабатывает данные, введённые пользователем, и сразу выдаёт итоги вычислений пользователю.
Объект Form
Объект Form в JavaScript представляет HTML-форму. Формы доступны в виде элементов массива forms[] , который является свойством объекта Document .
Формы расположены в этом массиве в том же порядке, что и в документе. То есть элемент document.forms[0] ссылается на самую первую форму документа. На последнюю форму документа можно сослаться, например, так:
Программисту будет весьма полезно свойство объекта Form – массив elements[] , который содержит объекты JavaScript различных типов, представляющие различные элементы ввода формы. Элементы этого массива также располагаются в той же последовательности, в которой они расположены в документе. Например, на второй элемент третьей формы документа в текущем окне можно сослаться так:
document.forms[2].elements[1]
Определение элементов формы
Элементы HTML-формы позволяют создавать простые пользовательские интерфейсы для JavaScript-программ.
Пример такой формы с несколькими элементами я уже приводил здесь, поэтому повторяться не буду. А в этой статье приведу список основных элементов форм с их свойствами и обработчиками событий.
| Объект | HTML-тег | Свойство “type” | Событие | Описание |
| Button | или | «button» | onclick | Кнопка |
| Checkbox | «checkbox» | onclick | Флажок | |
| File | «file» | onchange | Поле для ввода имени файла, загружаемого на веб-сервер | |
| Hidden | «hidden» | Нет | Данные, сохраняемые вместе с формой, но невидимые пользователю | |
| Option | Нет | Обработчики событий подключаются к объекту Select, а не к отдельным объектам Option | Один элемент объекта Select | |
| Password | «password» | onchange | Поле для ввода пароля (набранные символы невидимы) | |
| Radio | «radio» | onclick | Переключатель. Одновременно может быть установлен только один. | |
| Reset | или | «reset» | onclick | Кнопка, очищающая значения формы |
| Select | «select-one» | onchange | Список или выпадающее меню, в котором может быть выбран один элемент (см. также объект Option) | |
| Select | «select-multiple» | onchange | Список, в котором может быть выбрано несколько элементов (см. также объект Option). | |
| Submit | или | «submit» | onclick | Кнопка для передачи данных формы |
| Text | «text» | onchange | Однострочное поле ввода | |
| Textarea | «textarea» | onchange | Многострочное поле ввода |
Пример использования форм в JavaScript
Ну а теперь ещё простой пример использования форм ввода-вывода и на этом первое знакомство закончим.
myform">Пользователь: Пароль: password" size="15">
Здесь у нас форма с четырьмя элементами: поле ввода текста ( text ), поле ввода пароля ( password ), кнопка очистки полей ввода ( reset ) и просто кнопка ( button ).
Для обычной кнопки имеется обработчик ShowPassword() события onClick , который выводит окно с паролем (знаки, введённые в поле password , невидимы пользователю).
Для кнопки reset обработчик события создавать необязательно, потому что нажатие на эту кнопку автоматически очищает все поля формы.
Ну а в начале сценария мы использовали способ доступа к элементам формы через массивы форм и элементов:
document.write(document.forms[0].elements[2].value);
Этот код выведет слово “Очистить”, поскольку третьим элементом формы является кнопка с надписью “Очистить”.
А вот так примерно всё это будет выглядеть:
Эта статья — лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь: