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

Формы

Цель: Научиться создавать формы и указывать обработчиков форм;
Научиться создавать элементы управления формы; Закрепить навыки,
полученные при создании таблиц.

5.1 Теоретические сведения

5.1.1 Формы. Общие сведения

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

Как правило, форма работает совместно с установленным на сервере
сценарным приложением, обрабатывающим введенную информацию. Механизм
обработки форм представлен на рисунке 5.1.

Схема работы Web-сервера

Рисунок 5.1 – Обработка данных формы сервером

Наиболее широко формы применяются для поиска, регистрации, заполнения
анкет, тестов и т.д. Форма определяется с помощью тегов
<form></form>, между которыми располагаются поля ввода,
кнопки, а также все необходимые элементы оформления формы. Для указания
параметров в теге <form> используются атрибуты (см. таблицу 4.1).

Таблица 5.1 — Атрибуты тега

Атрибут

Назначение

action адрес программы или документа, которые обрабатывают данные формы
method метод передачи данных по протоколу http. Возможные варианты
значений метода: GET — способ передачи, когда данные, введенные в
форму добавляются в строку запроса
name имя формы. Используется для обращения к форме с помощью javscript.
target имя окна или фрейма, куда обработчик будет загружать возвращаемый результат
enctype тип информации формы. Различается в случае использования символьно-цифровой информации и в случае использования файлов

5.1.1 Элементы управления формы

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

Поле ввода Поле ввода

Однострочное поле ввода и используется, когда необходимо, чтобы
пользователь ввел в форму данные в произвольной форме но ограниченные по
объему. Для получения поля ввода используют тег <input type=»text»>.

Тег <input> является одним из разносторонних элементов формы и
позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом предназначен для
создания текстовых полей, различных кнопок, переключателей и флажков.

Основной параметр тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Кроме атрибута type тег имеет следующие атрибуты (см. таблица 4.2):

Таблица 5.2 — Атрибуты тега

Атрибут

Назначение

align определяет выравнивание, в случае если type=“image”
alt определяет альтернативный текст для кнопки с изображением (type=“image”)
checked предварительно активированный переключатель или флажек
disabled блокирует доступ и изменение элемента (поле недоступное)
maxlength максимальное количество символов, разрешенных в тексте
name имя поля, предназначено для того, что бы отличать один элемент
управления от другого. Имя может быть указано по всем правилам
именования переменных
readonly разрешает только чтение с текстового элемента управления
size ширина текстового поля в символах
value значение элемента. Значение переменной указанной в атрибуте name

ПереключательПереключатель

Переключатели определяют поля выбора одного значения из нескольких
доступных, для каждой позиции переключателя создается свой тег <input
type=»radio»>. Группируются переключатели при помощи одинакового
имени, задаваемого атрибутом name.

Флажки. Флажек

Флажки используются, когда необходимо, чтобы пользователь выбрал один
или несколько вариантов из ограниченного числа вариантов выбора. Флажки
в форме не зависят друг от друга, их можно установить или
сбросить в любой комбинации. Для каждого флажка необходимо задать свое
уникальное имя при помощи атрибута name. Создаются флажки тегом <input type=»checkbox»>. Для установки флажка при загрузке страницы необходимо указать атрибут checked=“checked”.

Командные кнопки. Командные кнопки

Командная кнопка отправки (type=“submit”)
используются для выполнения пересылки данных формы на сервер. Командная
кнопка сброса (type=“reset”) возвращает форму к исходному состоянию
(очищает форму).

Поле выбора файла.Поле выбор файла

Поле выбора файла (type=“file”) создает поле для
выбора файла, который будет загружен на сервер вместе с информацией
формы. Рядом с полем ввода отображается командная кнопка “Обзор…”,
открывающая стандартное диалоговое окно выбора файла. Если форма
подразумевает загрузку файлов на сервер, то в атрибутах формы должны
быть установлены следующие атрибуты method=“post” и enctype=“multipart/form-data”.

Списки выбора.

Выпадающий список

Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие
меню) и списки с множественным выбором. Независимо от типов
списков  описываются они одинаково с помощью пары тегов <select></select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибута multiple тега <select>. Пример использования формы приведен в листинге 4.1:

Листинг 5.3 — Использование формы и элементов управления

Листинг. Форма и элементы управления

Форма

5.2 Практическая часть

  1. Запустите веб-сервер Денвер.
  2. Создать форму для заполнения анкеты (см. архив к лабораторной работе). Обратите внимание что страница с анкетой сверстана в виде таблицы с невидимой рамкой (см. рисунок 5.2).

    Задания для выполнения лабораторной работы 4

    Рисунок 5.2 – Форма заполнения анкеты

  3. Сохраните анкету в файле anketa.htm на своем домене. Обратите внимание, что вся форма должна заключаться в тег <form>.
  4. Создать поля для ввода имени пользователя и пароля пользователя
    (символы вводимые в поле Пароль должны отображаться звездочками).
    Вставка полей осуществляется тегом <input> с различными значениями
    атрибута type.
  5. Создать поля для ввода даты рождения. День и месяц рождения
    выбирается из выпадающего списка, а год вводится в ручную в поле ввода,
    причем количество вводимых символов не должно превышать четыре. Для
    формирования списка использовать тег <select>, а для задания ограничения на количество вводимых символов атрибут maxlength тега <input>.
  6. Создать переключатели для выбора пола. Реализовать возможность выбора только одного варианта. Использовать тег <input>.
  7. Создать флажок, с текстом «Да, я желаю получать спам» с флажком, установленным по умолчанию. Использовать тег <input>.
  8. Создать переключатели для выбора количества писем получаемых в день,
    проверить что бы переключатели из задания 4 и 6 формировали две
    различные группы.
  9. Создать список интересов с возможностью выбора нескольких элементов.
  10. Добавить поле для ввода нескольких строк текста с дополнительной
    информацией о пользователе. Поле должно иметь размеры 7 строк и 30
    столбцов. Для вставки такого поля используйте тег <textarea>.
  11. Создать поле с кнопкой «Обзор» для загрузки файла изображения. Использовать тег <input>.
  12. Создать две кнопки. Первую для передачи данных формы на сервер, а вторую для очистки формы. Использовать тег <input>.
  13. Покажите выполненную работу преподавателю

5.3 Контрольные вопросы

  1. В какой тег заключаются все элементы управления?
  2. Какой атрибут тега <form> указывает на файл, который будет обрабатывать данные формы?
  3. Какие существуют значения атрибута type в теге <input>?
  4. В чем отличия тега <input type=”reset”> и <input type=”submit”>?
  5. Как добавить на форму переключатель?
  6. Для чего предназначен тег <textarea>?
  7. Сколько тегов необходимо что бы вывести на экран поле ввода для указания пути к файлу и кнопки обзор?
  8. Какие существуют методы передачи данных формы на сервер?
  9. Как осуществляется обработка форм?
  10. За счет чего переключатели можно разбивать на группы?
  11. Какой атрибут тега <input> позволяет указать значение, которое будет заполнено при первом отображении формы?
  12. Для чего предназначен атрибут checked?

Добавить комментарий

Яндекс.Метрика