Тема: Формы и их обработка
Формы являются наиболее популярным способом "обратной связи" с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные формы для заказов или для того, чтобы получить от пользователей страницы какие-либо комментарии и пожелания.
Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.
Форма открывается тагом <FORM>, имеющим несколько опций.
Опция action="url" указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.
Опция method="стиль" указывает метод передачи данных программе-обработчику формы. "Стиль" может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
Опция name="имя" указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.
Опция enctype="кодирование" задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде enctype="text/plain".
Примеры:
Заголовок формы, используемой на поисковой машине Яndex, имеет вид:
<form name="web" method="get" action="/yandsearch">
Заголовок формы, отправляющей информацию на адрес E-mail, может иметь вид:
<form action="mailto:[email protected]?subject=Internet-Test"
method="post" enctype="text/plain" name="Q" onSubmit="return Validate()">
Здесь форма имеет имя Q, в качестве action указана отправка сообщения по E-mail на адрес [email protected] с темой "Internet-Test", опция enctype предписывает отправлять данные формы как текст, а опция onSubmit связывает отправку формы с функцией Validate(), написанной на Javascript. Этот прием широко используется для проверки корректности заполнения формы.
Внутри тага <form> находятся поля формы. Перечислим основные из них:
<textarea name="имя" cols="число столбцов" rows="число строк" wrap="стиль">...</textarea>
Таг предназначен для создания многострочного поля ввода. Опции cols и rows указывают число строк и столбцов в поле, опция wrap указывает на режим автоматического распределения текста в ячейке. Она может принимать одно из значений off (выключен), virtual (распределять текст по всей ячейке, но на сервер передавать как одну строку) или physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается). Опция name здесь и далее обозначает имя поля и предполагается обязательной. Текст, написанный в таге <textarea>, становится его значением по умолчанию.
Таг <select name="имя" size="размер" multiple>...</select> определяет в форме меню с одним или несколькими вариантами выбора или список с полосой прокрутки. Если опция size указана в виде size="1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Опция multiple, если она указана, разрешает выбирать из списка более одного значения. Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.
Внутри тага <select> размещаются элементы меню или списка, каждый - в своем таге <option>, имеющем общий вид
<option value="значение" selected>текст</option>
Опция value указывает значение, возвращаемое программе обработки при выборе пользователем данной опции, опция selected указывает на элемент списка, выбранный по умолчанию. Внутри тага <option> пишется текст, видимый в меню или списке на экране.
Таг <input>, в отличие от <textarea> и <select>, не должен закрываться и предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы.
<input type="text" name="строка" maxlength="максимальный размер" size="число символов" value="строка">
Создает поле ввода. Опция maxlength ограничивает максимальную длину вводимого текста, а опция size показывает максимальное количество отображаемых символов. Опция value указывает исходное значение поля ввода.
Текстовое поле с защитой вводимых символов (то есть, с заменой их на звездочки, как принято при вводе паролей) можно создать, если заменить опцию type="text" на type="password". Остальные опции поля ввода пароля - те же самые.
<input type="checkbox" name="строка" value="строка" checked>
Создает флажок. Опция value определяет значение, возвращаемое программе обработки при выборе пользователем флажка, опция checked, если она указана, делает флажок выбранным по умолчанию.
<input type="radio" name="имя" value="строка" checked>
Создает радиокнопку. Радиокнопки можно группировать, задавая одно и то же значение опции name. Опции value и checked имеют те же значения, что и у флажка.
<input type="reset" value="строка">
Создает кнопку для очистки формы. Значение опции value позволяет указать надпись для кнопки. После очистки все элементы формы принимают значения, которые они имели по умолчанию.
<input type="submit" value="строка">
Создает кнопку для отправки данных формы приложению-обработчику. Опция value позволяет указать надпись на кнопке.
Для создания произвольной кнопки вместо reset или submit указывается значение button. В основном это требуется при написании скриптов, работающих на стороне клиента. Например, кнопка, созданная тагом <INPUT TYPE="button" VALUE="Вывести" onClick="Look()"> подписана словом "Вывести", а при нажатии на нее вызывает функцию Look(), написанную на JavaScript.
Пример разработки формы:
Ваше имя: Ваш пол: Мужской ЖенскийНа каком курсе Вы учитесь? Первый Второй Третий Четвертый Пятый Какие языки программирования Вы знаете? Паскаль Си АссемблерНапишите несколько слов о себе:Конец формы
Эта форма имеет следующий HTML-код:
<form method="post" action="mailto:[email protected]?subject=Information">
<pre>Ваше имя: <input name="name" type="text" maxlength="40" size="40" value="">
Ваш пол: <input type="radio" name="pol" value="male">Мужской
<input type="radio" name="pol" value="female">Женский
На каком курсе Вы учитесь? <select name="curs" size="1">
<option value="1" selected>Первый</option>
<option value="2">Второй</option>
<option value="3">Третий</option>
<option value="4">Четвертый</option>
<option value="5">Пятый</option>
</select>
Какие языки программирования Вы знаете?
<input type="checkbox" name="pascal" value="yes" checked>Паскаль
<input type="checkbox" name="c" value="yes">Си
<input type="checkbox" name="asm" value="yes">Ассемблер
Напишите несколько слов о себе:</pre>
<textarea name="about" rows="6" cols="60" wrap="off"></textarea>
<p><input type="submit" value="Отправить данные">
<input type="reset" value="Очистить форму">
</form>
Эта форма пытается отправить данные по указанному в заголовке адресу электронной почты, используя тему письма "Information". Дальнейшие события зависят от того, установлена ли на машине пользователя почтовая программа-клиент. Если да, то информация будет отправлена, причем данные из полей формы придут в виде строк текста name=value, например, информация о курсе в виде curs=1. Если на машине нет программы электронной почты, Windows предупредит об этом.
Обратите внимание, что для лучшего выравнивания данных часть формы заключена в таг <pre>, а в части, находящейся вне тага <pre>, использованы стандартные для HTML способы форматирования текста, например, таг абзаца.
Задание по теме "Формы".
Создайте документ HTML, содержащий форму для заполнения заказа на товар. Заказ должен быть отправлен по электронной почте.
Форма предусматривает поле ввода номера банковского счета, поле ввода личного номера пользователя (этот номер следует защитить от "подглядывания" при вводе), список выбора товаров (можно выбрать как один, так и несколько товаров), поле ввода произвольного комментария пользователя.
Также пользователь должен указать один из двух методов оплаты - наличным или безналичным расчетом. Пользователь должен иметь возможность указать, какую дополнительную информацию он хочет получить при ответе - данные об остатках на счете и/или список последних платежей по счету. Любая из этих двух опций может быть включена или выключена.
Предусмотрите также возможность сброса введенных в форму данных.