ЛабыWeb / Лаб_Web_JS / ЛабРабота9_1
.docТема «Форма в документе HTML. Элементы управления формы»
Цель работы: Научиться создавать формы в web-странице. Изучить свойства дескрипторов формы и элемента управления Поле ввода.
Теория. Формы выполняют следующие задачи.
-
Сбор информации от пользователей узла с последующим сохранением в базе данных.
-
Интерактивное управление содержанием Web- страницы.
Форма представляет собой наборы элементов управления: командные кнопки, переключатели, флажки, раскрывающиеся списки, поля для ввода данных и другие. Форма на Web-странице должна быть простой и понятной для пользователей. Вся форма должна умещаться в окне обозревателя( ширина формы не более 75 символов, около 500 пикселей , а высота менее 40 строк).
Подписи элементов управления должны быть короткими, но понятными. Необходимо использовать экранные подсказки( атрибут Title).
Соглашение по именам. Элементы управления могут использовать атрибут NAME, если предполагается обращение к данному элементу управления в коде сценария при программировании некоторых действий. При задании имени элементу управления нельзя использовать символ пробела, а вместо пробелов лучше применять символы подчеркивания «_».
Создание
формы
Объект формы создается дескрипторами <FORM>...</FORM>. Так же, как и объект таблицы, объект формы не отображается в окне обозревателя до тех пор, пока в него не будут добавляться элементы формы.
С помощью атрибутов дескриптора <FORM> можно настроить общие параметры работы формы.
METHOD — определяет метод передачи данных формы на Web-сер вер. Рассмотрение этого атрибута выходит за рамки книги.
NAME — имя формы, по которому к форме и к ее элементам можно обращаться в коде сценария на JavaScript.
ACTION — адрес сценария обработки данных формы. Это может быть адрес URL ресурса в Интернет или адрес электронной почты, как в следующем примере:
<FORM METHOD='post' ACTION='mailto:MyAddress@mail.ru' ENCTYPE= 'text/plain'>
Для установки адреса электронной почты используется ключевое слово mailto:, как и при создании гиперссылки на адрес электронной почты.
ENCTYPE — формат данных формы. В том случае если данные фор мы предназначены для передачи по адресу электронной почты, этому атрибуту следует присвоить значение 'plain/text'.
ACCEPT-CHARSET — поддерживаемая кодировка текста. Если в полях формы предполагается ввод текста с использованием символов кириллицы, следует установить поддержку соответствующей кодировки текста, например: KOI8-R.
Дескрипторы <FORM>...</FORM> могут находиться в любой части основного раздела документа HTML, заключенного между дескрипторами <BODY>...</BODY>.
Элементы управления формы – поле ввода
Поля ввода предоставляют пользователю возможность ввести строку текста с информацией о своих персональных данных или дать краткий ответ на вопрос.
Поля ввода создаются следующим образом:
<INPUT TYPE='text' NAME='имя'>
Помимо имени в атрибуте NAME для данного элемента управления можно устанавливать следующие атрибуты:
-
SIZE — ширина поля ввода в символах (по умолчанию 20 символов). Если пользователь введет больше символов, чем установлено в атрибуте SIZE, то часть введенного текста скроется за границей поля.
-
MAXLENGTH — максимально допустимое число символов в строке, включая символы пробелов. Обычно устанавливают значение, которое равно значению атрибута SIZE или меньше него.
-
VALUE — текст, который отобразится в поле по умолчанию.
Разновидностью поля ввода является:
А) поле пароля: <INPUT TYPE='passwords’>
Отличительная особенность поля пароля состоит в том, что при вводе текста в поле вместо букв отображаются символы звездочек, точек или кружочков, в зависимости от типа обозревателя.
Б) поле для указания пути к файлу на диске, который пользователь хочет загрузить на сервер разработчика Web-узла. <INPUT TYPE='file'>
В окне обозревателя данный тип поля отображается вместе с кнопкой Обзор. Чтобы форма успешно осуществляла загрузку файла на Web-сервер, атрибуту enctype формы должно быть присвоено значение 'multipart/form-data'.
Остальные атрибуты устанавливаются так же, как в обычном поле ввода.
В)Скрытое поле не отображается в окне обозревателя, хотя и присутствует в форме, используется в следующих целях.
1) Маркирование форм. На одной Web-странице допускается, использование нескольких форм, причем данные форм могут передаваться по одному адресу. Установите в атрибуте VALUE скрытого поля имя формы, чтобы программа обработки данных могла идентифицировать исходную форму.
2) Сохранение результатов вычислений. Можно создать сценарий, который будет выполнять предварительную обработку данных на стороне клиента, разгрузив тем самым сервер. Результат вычислений можно сохранить в значении скрытого поля.
Скрытое поле создается следующим образом:
<INPUT TYPE='hidden' NAME='form_name' VALUE='form_l'>
Задание 1. Наберите текст и сохраните его как html-документ. Просмотрите файл.
Внимание:
подписи полей вводятся в задание1 как
обычный текст абзаца, а сами поля
переносятся в новую строку с помощью
дескриптора <BR>.
Задание 2. Скопируйте файл, который был создан при выполнении «ЛабРабота7Разметка» и в область «основной текст страницы» добавьте выделенный фрагмент из задания1 данной лабораторной работы. Сохранить изменения. Просмотрите файл.
Задание 3. Выполните задание2, но используя материал «ЛабРабота8»
Задание 4. Создайте форму для опроса студентов на интересующую Вас тему.