Рубанчик В.Б.

Лабораторная работа "Методы предварительной обработки информации из форм "

10/ 10

Лабораторная работа №6

Тема: "Методы предварительной обработки информации из форм"

Цель работы: Ознакомиться с методами получения информации из различных элементов форм; изучить особенности выполнения операций со строками и числами и методы преобразования типов

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

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

Чтобы реализовать такую проверку, необходимо уметь получать информацию из элементов формы.

В конце методической разработки приведена справочная информация, необходимая для выполнения заданий лабораторной работы.

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

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

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

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

а) Доступ по имени формы и по индексу в коллекции форм.

В модели DOM0 к объекту формы можно обратиться как к свойству объекта document, использую имя формы (атрибут name).

formObj=document.test //получение объекта формы с атрибутом name="test"

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

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

– обычными для массива числовыми индексами (отсчитываются от нуля), например, объект первой формы в документе

formObj=document.forms[0] ,

– именами форм (т.е. значениями атрибута name), например,

formObj=document.forms["test"].

б) Доступ по идентификатору.

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

Атрибут id относится к параллельно поддерживаемой браузерами объектной модели, поэтому он может задаваться в тегах вместе с атрибутом name или без него:

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

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

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

formObj = document.getElementById("test") //форма <form id="test" …>

Замечание.

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

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

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

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

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

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