JavaScript Формы
Цель работы: научиться управлять формой через сценарий.
Форма служит для ввода пользователем через окно браузера данных и передачи их на веб-сервер. Форма состоит из контейнера …
и заключённых в него тегов (элементов) , и .
Проверка данных перед отправкой на сервер
Для уменьшения нагрузки на сеть и веб-сервер можно проверять введённые пользователем данные на браузере с помощью сценария на JavaScript. Если в данных обнаружится ошибка, то пользователю предоставляется возможность её исправить. Введенные правильно данные отправляются на веб-сервер. Использование сценария для управления формой демонстрируется в примере 3.1.
Пример 3.1 состоит из двух страниц.Первая страница служит для ввода пользователем данных и их проверки с помощью скрипта, написанного на JavaScript. Если данные введены правильно, то они отправляются на веб-сервер. На веб-сервере полученные данные обрабатываются скриптом, написанным на языке PHP, формируется и пересылается на браузер пользователя новая страница.
В скрипте,написанном на JavaScript, для доступа к данным, находящимся в форме, используются имена и индексы элементов формы. Для задания адреса (URL) страницы, содержащей PHP-скрипт, используется свойствоaction объекта Form.
Получение данных из всплывающего списка
Иногда можно полностью решать задачу ведения диалога с пользователем средствами JavaScript, не обращаясь к веб-серверу. В примере 3.2 пользователь вводит код цвета в модели RGB и выбирает из списка название цвета. После нажатия кнопки Ввод на экран выводятся окрашенные в выбранные цвета код и название цвета.
СКИПТ SELECT function select_() < a=document.all.Kod.value //код цвета b= document.all.Gor.selectedIndex //номервыбранного элемента// спискаselect c = document.all.Gor.options[b].text//текст элементасписка d = document.all.Gor.options[b].value//передаваемое из формы //значение
В примере 3.2 нет необходимости использовать контейнер … , так как на веб-сервер ничего не передаётся. Для вывода на экран кода и названия цвета используется свойство innerHTML. Строго говоря, innerHTML следовало бы называть не свойством, а методом. Рассмотрим применение этого свойства на примере вывода на экран введённого пользователем кода цвета. Пусть пользователь ввёл код цвета a=FF0000, т.е. красный.
В результате выполнения оператора
В результате выполнения оператора
в элемент вставится значение переменной e:
и браузер выполнит преобразованный злемент (оператор языка HTML), т.е. выведет на экран
Таким образом, с помощью свойства innerHTML можно на стороне браузера программным путём вносить изменения в HTML-документ (страницу сайта).
Задача 3.1. Создайте сайт из двух страниц. Первая страница имеет заголовок Заказ мебели. На ней расположены два поля со списками (теги ), поле () и кнопка (). Из первого поля со списком пользователь выбирает изделие (шкаф, стол, сервант и т.д.).Из второго поля со спискомпользователь выбирает материал (дуб,орех, бук). В третье поле нужно ввести количество заказываемых изделий. После ввода данных необходимо проверить, все ли данные введены.Если обнаружена ошибка, то нужно вывести сообщение и предложить её исправить.
Проверка данных сразу после ввода
Если в форме нужно заполнить много полей, то пользователю удобно получать сообщения об ошибках сразу после окончания ввода данных в очередное поле, то есть после нажатия клавиши Tab или клавиши со стрелкой. Для немедленной проверки введённых данных служит событие onchange:
Функция, вызываемая событием onchange, имеет примерно такую структуру:
Методы focus() и select() служат для возвращения курсора мышки в поле ввода и выделения ошибочных данных. Эти методы без использования специальных приёмов правильно работают только в браузере Mozilla.
Задача 3.2. Создайте страницу (рис. 1) для вычисления тригонометрических функций. Вводимые пользователем данные должны проверяться немедленно после ввода и после нажатия кнопки Вычислить.
Указания. Не забудьте перевести градусы в радианы. Название тригонометрической функции можно передавать как параметр тега :
Сформируйте текстовую строку вида
"Math." + имя_ф + "(" + знач_аргумета + ")" // имя_ф – sin,cos или tan
Затем воспользуйтесь функцией eval(строка), которая выполняет выражение, хранящееся в строке.
Формы ввода данных в 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 можно здесь: