Тема: формы и их обработка

      Комментарии к записи Тема: формы и их обработка отключены

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

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы на стороне клиента, встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.

Форма открывается тагом , имеющим несколько опций.

Опция action=url указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.

Опция method=стиль указывает метод передачи данных программе-обработчику формы. Стиль может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.

Опция name=имя указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.

Опция enctype=кодирование задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде enctype=text/plain.

Примеры:

Заголовок формы, используемой на поисковой машине Яndex, имеет вид:

Заголовок формы, отправляющей информацию на адрес E-mail, может иметь вид:
method=post enctype=text/plain name=Q onSubmit=return Validate()

Здесь форма имеет имя Q, в качестве action указана отправка сообщения по E-mail на адрес vita@lvs.ru с темой Internet-Test, опция enctype предписывает отправлять данные формы как текст, а опция onSubmit связывает отправку формы с функцией Validate(), написанной на Javascript. Этот прием широко используется для проверки корректности заполнения формы.

Внутри таганаходятся поля формы. Перечислим основные из них:

…
Таг предназначен для создания многострочного поля ввода. Опции cols и rows указывают число строк и столбцов в поле, опция wrap указывает на режим автоматического распределения текста в ячейке. Она может принимать одно из значений off (выключен), virtual (распределять текст по всей ячейке, но на сервер передавать как одну строку) или physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается). Опция name здесь и далее обозначает имя поля и предполагается обязательной. Текст, написанный в таге , становится его значением по умолчанию.

Таг … определяет в форме меню с одним или несколькими вариантами выбора или список с полосой прокрутки. Если опция size указана в виде size=1, отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Опция multiple, если она указана, разрешает выбирать из списка более одного значения. Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.

Внутри тагаразмещаются элементы меню или списка, каждый — в своем таге , имеющем общий вид
текст
Опция value указывает значение, возвращаемое программе обработки при выборе пользователем данной опции, опция selected указывает на элемент списка, выбранный по умолчанию. Внутри тагапишется текст, видимый в меню или списке на экране.

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

Создает поле ввода. Опция maxlength ограничивает максимальную длину вводимого текста, а опция size показывает максимальное количество отображаемых символов. Опция value указывает исходное значение поля ввода.

Текстовое поле с защитой вводимых символов (то есть, с заменой их на звездочки, как принято при вводе паролей) можно создать, если заменить опцию type=text на type=password. Остальные опции поля ввода пароля — те же самые.

Создает флажок. Опция value определяет значение, возвращаемое программе обработки при выборе пользователем флажка, опция checked, если она указана, делает флажок выбранным по умолчанию.

Создает радиокнопку. Радиокнопки можно группировать, задавая одно и то же значение опции name. Опции value и checked имеют те же значения, что и у флажка.

Создает кнопку для очистки формы. Значение опции value позволяет указать надпись для кнопки. После очистки все элементы формы принимают значения, которые они имели по умолчанию.

Создает кнопку для отправки данных формы приложению-обработчику. Опция value позволяет указать надпись на кнопке.

Для создания произвольной кнопки вместо reset или submit указывается значение button. В основном это требуется при написании скриптов, работающих на стороне клиента. Например, кнопка, созданная тагомподписана словом Вывести, а при нажатии на нее вызывает функцию Look(), написанную на JavaScript.

Пример разработки формы:

Ваше имя: Ваш пол: Мужской ЖенскийНа каком курсе Вы учитесь?Первый Второй Третий Четвертый Пятый Какие языки программирования Вы знаете? Паскаль Си АссемблерНапишите несколько слов о себе:

Конец формы

Эта форма имеет следующий HTML-код:

Ваше имя:

Ваш пол: Мужской

Женский

На каком курсе Вы учитесь?

Первый

Второй

Третий

Четвертый

Пятый

Какие языки программирования Вы знаете?

Паскаль

Си

Ассемблер

Напишите несколько слов о себе:

Эта форма пытается отправить данные по указанному в заголовке адресу электронной почты, используя тему письма Information. Дальнейшие события зависят от того, установлена ли на машине пользователя почтовая программа-клиент. Если да, то информация будет отправлена, причем данные из полей формы придут в виде строк текста name=value, например, информация о курсе в виде curs=1. Если на машине нет программы электронной почты, Windows предупредит об этом.

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

Задание по теме Формы.

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

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

Также пользователь должен указать один из двух методов оплаты — наличным или безналичным расчетом. Пользователь должен иметь возможность указать, какую дополнительную информацию он хочет получить при ответе — данные об остатках на счете и/или список последних платежей по счету. Любая из этих двух опций может быть включена или выключена.

Предусмотрите также возможность сброса введенных в форму данных.

Статьи к прочтению:

14. Web-технологии. Обработка форм Django | Технострим


Похожие статьи: