Получение информации из простого текстового поля

ЛАБОРАТОРНАЯ РАБОТА

Тема: Управление обработкой форм. Получение информации из форм на стороне клиента (1)

Цель работы: Познакомиться с общими идеями контроля за заполнением форм на стороне клиента и основами событийной архитектуры.

Закончив заполнения формы, пользователь нажимает кнопку, полагая, что данные будут отправлены на обработку сервером. Но, если форма заполнена не полностью, или в некоторых полях допущены ошибки, связанные с неправильным форматом данных, то обработка завершится неудачей. Тогда пользователь вместо результатов получит от севера сообщение об ошибке. Сервер впустую потратит время на выявление ошибок в данных, а пользователь — на ожидание сообщения об ошибках.

Чтобы избежать этого, нужно обеспечить выполнение контроля заполнения формы еще на стороне клиента. Данные из формы будут отсылаться серверу только случае, если она заполнена правильно.

Фактически для выполнения проверки нужно запустить некоторое веб-приложение, которое считывает информацию из элементов формы и затем выполняет с нею некоторые операции. Очевидно, что содержание этих действий может быть любым. Оно ограничено возможностями языка программирования и объектной модели. Поэтому по той же схеме могут строиться веб-приложения, решающие разные задачи.

До недавнего времени предварительная обработка информации из форм могла выполняться только средствами JavaScript (или библиотек на его основе, таких как jQuery). С появлением HTML 5 задача контроля введённой информации в некоторых случаях упростилась. Некоторые ограничения на значения полей (адреса электронной почты, даты и т.п.) задаются средствами HTM. А задача отслеживания их выполнения возлагается на браузер. Однако браузеры пока реализуют эти новые возможности не в полной мере. Поэтому основным средством контроля является программный код на JavaScript.

Получение объекта формы

В процессе загрузки веб-страниц браузеры строят объектную модель документа, которая может использоваться интерпретатором JavaScript. Поэтому в js-коде все html-элементы представляются программные объектами, в свойствах объектов. Поэтому, если создается объект, соответствующий форме, то управляющие элементы формы, становятся свойствами объекта формы.

Тогда, чтобы прочесть информацию из элементов формы (текстовых полей, флажков и т.п.), нужно сначала получить объект формы (в лабораторной работе будем обозначать его js-переменной, с именем formObj).

Выполнить это можно несколькими способами. Одни возможности предлагает модель BOM (Browser Object Model), другие — спецификация DOM.

А) Модель BOM(Доступ по имени формы или индексу в коллекции форм).

Хотя стандарт для объектной модели BOM (её называют DOM 0) не разрабатывался, она по-прежнему поддерживается всеми браузерами. В этой модели для идентификации html-элементов был предложен атрибут name, продолжающий играть важнейшую роль при обработке форм.

При построении модели BOM браузер преобразует html-элементы в объекты. Значения атрибута name элементов (регистры букв учитываются!) используется для именования объектов.

В модели BOM программные объекты, построенные для форм, рассматриваются как свойства объекта document. Имена для этих свойств браузер берет из атрибутов name элементов, составляющих форму.

Например, получения объекта формы

<form name =" test "...>...</form>

можно использовать следующий код:

formObj = document. test

На одной веб-странице может быть расположено несколько форм. Поэтому браузер собирает формы в коллекцию (массив) forms, также являющийся свойством объекта document.

Элементы этой коллекции индексируются двумя способами.

Во-первых, традиционным для массивов способом — числами (от нуля). Например, получить объект первой (по тексту документа) формы можно так

formObj=document. forms [ 0 ].

Во-вторых, параллельно индексация выполняется также строками, взятыми из атрибута name. Массивы, у которых индексами являются текстовые строки, называются ассоциативными. Они устанавливают ассоциацию (соответствие, отображение) между строками и значениями.

Например, для той же формы, что и в предыдущих примерах:

formObj=document. forms [" test "].

б) Модель DOM (Доступ по идентификатору)

В модели DOM 1 для идентификации элементов были введен новый атрибут id. Одновременно набор доступных в объектной модели методов был расширен методом getElementById("идентификатор"), позволяющий отыскивать в модели документа объект по его идентификатору.

Так как объектные модели BOM и DOM поддерживаются параллельно, то атрибут id может задаваться в тегах вместе с атрибутом name или без него:

<form id="test" name="test">... </form>

//идентификатор и имя могут совпадать, но это разные свойства!

Чтобы получить объект формы по идентификатору, нужно вызвать метод getElementById (соблюдать регистры букв!) для объекта document:

formObj = document.getElementById ("test")

Замечание

Как уже упоминалось, в объектной модели каждому html-элементу ставится в соответствие объект, а значения атрибутов элемента помещаются в одноименные свойства этого объекта. Если formObj — объект элемента формы, то доступ к значениям атрибутов можно получить с помощью операции "точка": formObj.id, formObj.name, formObj.action и т.п.

ЗАДАНИЕ 1 (Получение id формы по name и наоборот)

В html-документе создать элемент пустой формы (без управляющих элементов и кнопок) с атрибутами name и id. Задать этим атрибутам разные значения.

В текст html-страницы после определения формы добавить фрагмент программного кода (<script>), в котором доступ к объекту формы реализуется двумя способами.

а) Получить объект формы formObj, используя значение атрибута name, и с помощью alert вывести его идентификатор id.

б) Получить объект формы formObj, используя значение атрибута id, и с помощью alert вывести значение его атрибута name.

Процедура отправки формы на обработку. Событие submit

После ввода информации, чтобы начать обработку формы, пользователь нажимает соответствующую кнопку. Эта операция известна как submit, что в буквальном переводе означает "представить на рассмотрение". При её выполнении активизируется передача информации из формы обрабатывающей программе.

Основные задачи браузеров — отсылка запросов, получение ответов на них и отображение содержания ответов. Поэтому передача информации на обработку означает, что браузер делает запрос по некоторому адресу (URL) и снабжает этот запрос информацией из формы. Результатом обработки формы будет некоторая веб-страница, URL которой задается в атрибуте action тега <form>. При получении ответа браузер загружает страницу, замещая страницу с формой.

Когда атрибут action отсутствует, то по умолчанию обработчиком становится текущая страница, которая будет загружена браузером заново, а, значит, форма появится в начальном виде. Признак того, что показана перезагруженная страница, — в адресной строке браузера к URL добавляется знак вопроса и некоторая информация (это называется строкой запроса).

Но ещё до отправки нужно выполнить проверку правильности заполнения формы. Эта проверка должна произойти в период после нажатия кнопки, но до отправки запроса. Т.е. нужно каким-то образом "вклиниться" между этими двумя действиями. Это реализуется средствами событийной архитектуры.

Реально происходит следующее. Когда пользователь нажал кнопку типа submit, генерируется одноименное событие submit.

Появление события вызывает следующее действие операционной среды — поиск программы-обработчика. Простейший способ задать такой обработчик — добавить в тег формы атрибут on submit (что переводится как "в случае события submit"). Значением атрибута — строка со взятым в кавычки программным кодом, выполняющим обработку. Код может содержать, например, вызовы ранее определенных функций и другие операторы.

По результатам выполненной проверки должно быть принято решение о дальнейших действиях. Если ошибок в заполнении формы не обнаружено, то информация из формы передается на обработку по указанному в URL. Если ошибки есть, то нужно сообщить об этом пользователю и отменить отправку.

Реализация этого выбора основана на стандартном поведении элемента формы. Если программный код обработчика события submit явным образом возвращает false, то это воспринимается как отмена действия атрибута action, т.е. форма не отсылается.

Во всех остальных случаях (включая возврат нуля, пустой строки или даже отсутствие оператора возврата), считается, что обработчик возвращает true, и дается разрешение на отправку.

Пример. Если функция ok() возвращает 1 (успех) или 0 (есть ошибки), то в определении формы можно использовать следующий код

<form action="какой-то URL"

onsubmit="if(ok())return true; else return false;">

...</form>

Обработка может потребовать объемного кода. Чтобы значение атрибута-обработчика не было громоздким, удобно код с проверкой выделить в отдельную функцию, возвращающую true или false. А описание этой функции поместить в тег <script> заголовочной части документа. Тогда, если функция названа check, то её использование будет выглядеть следующим образом:

<form name="task1" onsubmit="return check();" >...</form>

В лабораторной работе используется упрощенный синтаксис задания функций-обработчиков. Интерпретируя его, браузер помещает код, находящийся в кавычках, в анонимную функцию, и управление дальнейшими действиями браузера зависит от возвращаемого значения именно этой анонимной функции. Без явного оператора возврата анонимная функция не будет ничего возвращать (нет оператора возврата) — function(){check();}. Отсутствие возвращаемого значения по умолчанию будет трактоваться, как true, т.е. независимо от результатов проверки, данные всегда будут отсылаться по адресу, указанному в action.

Программная генерация событий submit и reset

Иногда появляется необходимость имитировать нажатие пользователем кнопки submit и выполнить отправку формы на обработку программно.

Для этого у программного объекта формы есть специальный метод submit(), не имеющий аргументов. Вызов метода submit()— это виртуальное нажатие кнопки submit, т.е. генерация события submit.

Аналогично с помощью вызова метода reset() можно сбрасывать содержимое формы.

Использование гиперссылок для выполнения программного кода

Гиперссылки могут применяться не только по своему прямому назначению, но и для запуска программного кода. Для этого имеется две возможности.

а) Программный код может быть помещен в атрибут href. Чтобы браузер мог отличить его от URL, перед программным кодом необходимо указать псевдопротокол javascript: (с двоеточием!).

На самом деле это не протокол, а лишь запись, по синтаксису напоминающая указание протокола. Отсюда приставка "псевдо".

Щелчок на такой ссылке будет означать выполнение соответствующего кода. Например,

<a href=" javascript: alert('Cообщение вызвано по ссылке') ">

Cообщение

</a>

Так как атрибут href "занят" кодом, то в этом случае теряется возможность указать URL и перейти по ссылке на другую страницу.

Псевдопротокол javascript — это наследие 1990-х годов. Он поддерживается всеми браузерами, но в современные спецификациях не упоминается.

б) Более гибкий вариант использования ссылок основан на обработке событий. Основное действие с гиперссылками — щелчок, при котором генерируется событие click, которое может обрабатывать программный объект, соответствующий ссылке

Для обработки в тег <a> можно добавить атрибут on click с кодом обработки события click. Важно отметить, что обработка события, заданная атрибутом onclick, происходит до перехода по ссылке (атрибут href).

По аналогии с onsubmit в обработчике события onclick для элемента <a> можно с помощью возвращаемого значения (true/false) разрешать или блокировать действие href (т.е. переход по ссылке). Использование для выполнение кода обработчика события позволяет сохранить главную функцию гиперссылки — переход по URL.

ЗАДАНИЕ 2 (Обработка событий submit и click)

1. Создать два html-документа.

а) В документе response.htm предусмотрен вывод текста "Ответ на запрос", помещенный в один из тегов для заголовков <h...>.

б) В заголовочную части второго документа (файл form1.htm) вставить скрипт, в котором определена переменная ok, инициализируемая значением "истина":

var ok=true;

В документе form1.htm создать форму с именем myForm (атрибут name), содержащую кнопку типа submit с названием "Обработать".

Данные из формы должны передаваться на обработку файлу response.htm.

В тег <form> добавить обработчик события submit, в котором с помощью alert, выводится текст "Обработка", а затем выполняется оператор возврата return со значением переменной ok.

в) Загрузить страницу. Нажать кнопку "Обработать". Объяснить, что происходит.

г) Изменить значение переменной ok на "ложь". Загрузить страницу. Нажать кнопку "Обработать". Объяснить, что происходит.

2. Для выполнения следующего задания сохранить копию файла form1.htm под названием form2.htm.

а) Вернуть переменной ok значение "истина".

б) После закрывающего элемента формы добавить гиперссылку в виде текста "Отправить форму" (при выводе на экран отступить от кнопки).

В атрибуте href гиперссылки задать код, выполняющий следующие действия: (а) получить объект формы, (б) вызвать для этого объекта метод submit().

Замечание

Когда для получения объекта формы используется имя формы, то имя нужно поместить в кавычки. Значение атрибута href тоже помещается в кавычки. Потому может потребоваться использовать кавычки внутри кавычек. В этом случае нужно воспользоваться тем, что в JS для записи строк можно использовать как двойные, так и одинарные кавычки, причем одни могут быть без проблем вложены в другие.

в) Загрузить страницу. Нажать гиперссылку. Объяснить происходящее.

3. Для выполнения следующего задания сохранить копию файла form2.htm под названием form3.htm.

а) Добавить в элемент гиперссылки атрибут для обработки события click.

В этом атрибуте определить код, который выводит в модальном окне (alert) сообщение "Щелчок на гиперссылке" и содержит оператор возврата со значением "истина".

б) Загрузить страницу. Нажать на гиперссылку. Объяснить происходящее.

в) В обработчике события click заменить возвращаемое значение на "ложь". Загрузить документ. Нажать на гиперссылку. Объяснить происходящее.

Получение информации из простого текстового поля

Содержание текстового поля (type="text") или поля для пароля (type="password") хранится в свойстве value программных объектов этих элементов.

Чтобы прочесть строку, введенную в такой элемент с атрибутом name=" mytxt ", нужно обратиться к свойству объекта следующим образом:

formObj. mytxt. value.

Элементы текстовых полей input (типа text или password) разрешают не только чтение введенной пользователем строки текста, но и программную запись в них символьных строк.

ЗАДАНИЕ 3 (Работа с данными из текстовых полей)

1. Создать форму с одним текстовым полем (элемент input типа text) и кнопкой "Принять" (элемент input типа submit, задать атрибут name).

а) Для разметки формы использовать таблицу со следующей структурой (в чистовом варианте границы таблицы убрать):

б) При нажатии кнопки Принять вызывается функция info(), которая с помощью alert выводит текст, который пользователь поместил в текстовое поле (для также задать атрибут name).

Так как в этом задании проверка введенной строки не производится, функция info() должна возвращать true.

в) Проверить работу программы. Обратить внимание на то, как после нажатия кнопки меняется содержание адресной строки браузера (URL).

2. Задание дополняется следующими требованиями.

а) Текстовое поле имеет значение по умолчанию (например, 123).

б) В функции обработчике после кода с вызовом alert, предусмотреть программное изменение значения текстового поля (например, на 456).

3. Загрузить исходную страницу заново. Для этого убрать в адресной строке информацию, добавленную браузером (знак вопроса и далее) при отсылке формы, и нажать Enter.

Изменить возвращаемое info() значение на false. Нажать кнопку Принять и вновь проанализировать содержание адресной строки. Объяснить результат.

4. Если для веб-приложения требуется, чтобы при нажатии кнопки Принять происходила обработка данных, но страница не перегружалась (информацию в форме сохранялась), можно в обработчике с помощью false заблокировать действие action. Но это не единственный вариант действий. Можно поступить следующим образом.

а) Убрать из тега формы обработчик onsubmit.

б) Заменить кнопку типа "submit" на кнопку <button type="button" …>. С элементом <button> типа button по умолчанию не связаны никакие действия. Их определяет программист.

Чтобы при щелчке на кнопке button запускалась процедура обработки данных из формы, нужно использовать обработку события кнопки click. Для этого в тег <button> с помощью атрибута onclick добавляется обработчик события — в текущем задании это просто вызов функции info().

Теперь возвращаемое info() значение в отправке формы роли не играет, так как ведется обработка события, относящегося только к кнопке <button>, а не к форме в целом. Поэтому перезагрузки страницы не будет, форма останется той же.

Внести изменения в код страницы и проверить работу программы.

Вопросы для контроля

1. В чем преимущества выполнения предварительно контроля заполнения форм на стороне клиента?

2. Какими способами можно получить доступ к объектам форм в модели BOM?

3. Как можно получить доступ к объектам форм в модели DOM?

4. Когда возникает событие submit?

5. Какие действия выполняет браузер при нажатии кнопки submit? Как это действие имитировать программно?

6. Как заблокировать отсылку информации из формы на обработку?

7. Какими способами можно задать программный код, который будет выполнен при щелчке на гиперссылке?

8. Можно ли программно заблокировать переход по гиперссылке?

9. Как прочесть информацию из текстового поля?

10. Какие типы поведения могут задаваться кнопке <button> (см лаб. "Создание форм")? Какая особенность поведения кнопки <button> использована в последнем задании?

Дата добавления: 2015-10-28