Элемент select
Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.
Для организации списков с прокруткой и выпадающим меню можно использовать атрибут < SELECT >. Для определения списка пунктов используются элементы < OPTION > внутри < SELECT >.
Вместе с атрибутом SELECT можно использовать следующие атрибуты:
NAME- наименование объекта
MULTIPLE - позволяет выбрать более чем одно наименование
SIZE - определяет число пунктов, видимых для пользователя.
SIZE = 1 - браузер выводит список на экран в виде выпадающего меню (видно одно наименование) SIZE > 1 - браузер представляет на экране обычный список (число - количество видимых наименований)
С элементом OPTION можно использовать следующие атрибуты:
SELECTED - для первоначального выбора значения элемента по умолчанию
VALUE- значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу < OPTION>.
Меню <SELECT> из n элементов выглядит примерно так:
<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Как Вы видите, меню начинается с метки <SELECT> и заканчивается меткой </SELECT>. Метка <SELECT>содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню. Присутствие атрибут MULTIPLE которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню. Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню. Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут CHECKED, показывающий, что данный элемент отмечен по умолчанию.
Задание 4.9: Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection, значение которой может быть option1 (по умолчанию), option2 или option3.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_9 вывод списка</title>
</head>
<body>
<form>
<select name="selection">
<option value="option1" checked>вариант 1
<option value="option2">вариант 2
<option value="option3">вариант 3
</select>
</form>
</body>
</html>
Сохраните документ с именем пример4_9.htm, откройте в браузере, должно появиться следующее отображение:
Элемент textarea
Данный элемент используется для ввода большого количества текстовой информации (несколько строк).
Вместе с атрибутом TEXTAREA необходимо использовать следующие атрибуты:
NAME- наименование поля
COLS - число колонок (символов) в текстовой области
ROWS- число видимых строк в текстовой области
Задание 4.10.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_10 вывод текста</title>
</head>
<body>
<form>
<textarea name="adress" cols=64 rows-6>
Украина
Мариуполь
пр.Нахимова. 99
</textarea>
</form>
</body>
</html>
Сохраните документ с именем пример4_10.htm, откройте в браузере, должно появиться следующее отображение:
Задание 4.11. Пример создания формы «Анкета пользователя»
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_11 Анкета пользователя</title>
</head>
<body>
<h3 align=center> анкета пользователя </h3>
<p> ответьте, пожалуйста, на вопросы:
<form method="post" action="http://vvww.ok.com/ok">
<p> ваше имя: <input name="name" size="48">
<p> мужчина <input name="gender" type=radio value="male">
<p> женщина <input name="gender" type=radio value="female">
<p> детей <input name="family" type=text>
<p> страна <input name="family" type=text>
<ul>
<li> украина <input name="country" type="checkbox" value="ukraine">
<li> россия <input name="country" type="checkbox" value="russian">
<li> другая <textarea name="other" cols=48 rows=3></textarea>
</ul>
<p> электронный адрес: <input name="email" size="42">
<br> для подтверждения ввода нажмите на кнопку «Отправить данные».
<br> для сброса введенных данных нажмите на кнопку «Сброс».
<br>
<input type=submit value=" «Отправить данные» "><br>
<input type=reset value=" «Сброс»">
</form>
</body>
</html>
Сохраните документ с именем пример4_11.htm, откройте в браузере, должно появиться следующее отображение:
Когда пользователь щелкает на кнопке «Отправить данные», браузер передает сообщение (метод POST) по адресу http://www.ok.com/ok, а тело сообщения будет выглядеть примерно так:
name=01eg+Ivanov&gender=male&family=2&country=Ukraine&other=None&email=ok@ok.donin.com
Далее специальная программа, размещенная на сервере http://www.ok.com/ok начнет обработку ответов пользователя.
HTML предоставляет довольно мощный механизм пересылки содержимого форм по электронной почте. В приведенном выше примере необходимо заменить строку:
<form method="post" action="http://vvww.ok.com/ok">
На строку:
<FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain>
На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:
name=01eg+Ivanov&gender=male&family=2&country=Ukraine&other=None&email=ok@ok.donin.com
Обратите внимание, изменен алгоритм кодирования на text/plain, то есть фактически выключено кодирование вообще.
Задание для самостоятельного выполнения:
Сформировать форму следующего содержания:
Предусмотреть отправку данных на адрес электронной почты.
Контрольные вопросы:
Перечислите основные элементы формы.
Как создать выпадающее меню?
Как создать кнопку сброса?