Материал: 1896
1.7.ИСПОЛЬЗОВАНИЕ ФОРМ НА WEB-СТРАНИЦЕ. MAILTO
1.7.1.Создание форм на Web-странице
|
|
Таблица 20. Теги создания форм |
||||||
Тег |
|
Комментарий |
|
|
|
|||
<FORM METHOD="POST" |
Создает форму. METHOD применяется для |
|
||||||
ACTION="MAILTO:e-mail"> |
указания протокола, используемого для |
|
||||||
… |
пересылки данных на сервер. Протокол GET |
|
||||||
</FORM> |
выбран по умолчанию, но в большинстве |
|
||||||
|
случаев он не удовлетворяет разработчиков, |
|
||||||
|
поэтому чаще используют протокол POST. |
|
||||||
|
ACTION="MAILTO:e-mail" – пересылает |
|
||||||
|
заполненную |
форму |
по |
указанному |
|
|||
|
электронному адресу |
|
|
|
|
|
||
<TEXTAREA NAME="name" |
Создает окно для ввода текста. COLS |
|
||||||
COLS=" " ROWS=" "> |
указывает ширину окна; ROWS указывает его |
|
||||||
… |
высоту. Значения высоты и ширины задаются |
|
||||||
</TEXTAREA > |
в пикселях |
|
|
|
|
|
|
|
<SELECT> |
Создает скролируемое меню. Первое значение |
|
||||||
<OPTION VALUE="a">Первый |
меню будет показано на экране, остальные |
|
||||||
… |
будут |
доступны |
при |
|
использовании |
|
||
<OPTION ALUE="d">Четвертый |
прокрутки. OPTION указывает каждый |
|
||||||
</SELECT> |
отдельный элемент меню |
|
|
|
|
|||
<SELECT MULTIPLE |
Создает |
скролируемое |
меню. |
SIZE |
|
|||
NAME="name" SIZE=" "> |
устанавливает количество пунктов меню, |
|
||||||
<OPTION ALUE="a">Первый |
которое будет показано на экране, остальные |
|
||||||
… |
будут доступны при использовании прокрутки |
|
||||||
<OPTION VALUE="d">Пятый |
|
|
|
|
|
|
|
|
</SELECT> |
|
|
|
|
|
|
|
|
<INPUT TYPE="TEXT" |
Создает строку для ввода текста. Параметром |
|
||||||
NAME="name" SIZE=" "> |
SIZE указывается длина строки в символах |
|
||||||
<INPUT TYPE="CHECKBOX" |
Создает поле «флажок». За тегом следует |
|
||||||
NAME="name"> |
текст |
|
|
|
|
|
|
|
<INPUT TYPE="PASSWORD" |
Создает строку для ввода пароля. Введенная |
|
||||||
NAME="name" SIZE=" "> |
информация отображается звездочками |
|
|
|||||
<INPUT TYPE="RADIO" |
Создает RADIO кнопку (переключатель). За |
|
||||||
NAME="name" VALUE="a"> |
тегом следует текст |
|
|
|
|
|
||
<INPUT TYPE="SUBMIT" |
Создает |
кнопку |
«name», |
пересылает |
|
|||
VALUE="name"> |
заполненную форму по электронной почте |
|
||||||
<INPUT TYPE="IMAGE" |
Создает кнопку «name» – для этого |
|
||||||
BORDER="0" NAME="name" |
используется изображение, находящееся в |
|
||||||
SRC="name.gif"> |
файле |
name.gif. |
Пересылает |
заполненную |
|
|||
|
форму по электронной почте |
|
|
|
||||
<INPUT TYPE="RESET" |
Создает кнопку «name», которая очищает |
|
||||||
VALUE="name"> |
форму |
|
|
|
|
|
|
|
Формы предназначены для размещения ответов на адресованные посетителям вопросы. Web-форма – это то же самое, что и любая другая бумажная форма, но организованная посредством html-файла.
Чаще всего формы используются для:
–проведения опросов;
–получения отзывов.
Формы идеально подходят для включения в личные Web-страницы, поскольку для них требуется очень мало места.
Рассмотрим подробнее приведенные в табл. 20 теги форм.
Текстовое окно
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"> <H2>Textarea
<TEXTAREA NAME="text00" ROWS="5" COLS="30"> </TEXTAREA></H2></FORM>
…
На рис. 76 показано, как будет выглядеть форма в окне браузера.
Рис. 76. Вид Web-страницы в окне браузера
Скролируемое меню
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"><H2>Select <SELECT>
<OPTION VALUE="a">Первый
<OPTION VALUE="b">Второй
<OPTION VALUE="c">Третий <OPTION VALUE="d">Четвертый <OPTION VALUE="e">Пятый </SELECT></H2></FORM>
…
На рис. 77 показано, как будет выглядеть форма в окне браузера.
Рис. 77. Вид Web-страницы в окне браузера
Приведем еще один пример:
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"><H2>Select
<SELECT MULTIPLE NAME="n" SIZE="2"> <OPTION VALUE="a">Первый
<OPTION VALUE="b">Второй
<OPTION VALUE="c">Третий <OPTION VALUE="d">Четвертый <OPTION VALUE="e">Пятый </SELECT></H2></FORM>
…
На рис. 78 показано, как будет выглядеть форма в окне браузера.
Рис. 78. Вид Web-страницы в окне браузера
1.7.2. Элемент INPUT
Создание текстовой строки для ввода текста
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST">
<INPUT TYPE="TEXT" NAME="n" SIZE="23"></FORM>
…
На рис. 79 показано, как будет выглядеть форма в окне браузера.
Рис. 79. Вид Web-страницы в окне браузера
Создание поля «флажок»
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST">
<INPUT TYPE="CHECKBOX" NAME="n"></FORM>
…
На рис. 80 показано, как будет выглядеть форма в окне браузера.
Рис. 80. Вид Web-страницы в окне браузера
Создание строки для ввода пароля
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST">
<INPUT TYPE="PASSWORD" NAME="name" SIZE="5"></FORM>
…
На рис. 81 показано, как будет выглядеть форма в окне браузера.
Рис. 81. Вид Web-страницы в окне браузера
Создание кнопки RADIO
При создании группы переключателей возможно использование двух вариантов:
–выбор одного переключателя из группы переключателей;
–выбор нескольких переключателей из группы переключателей. Отличие при описании переключателей состоит в присвоении имен
(NAME). Для первого варианта эти имена должны быть одинаковые, для второго варианта – различные.
Рассмотрим реализацию данных вариантов на примере создания группы из трех переключателей:
1. Выбор только одного из трех переключателей
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"> <H3> Переключатели </H3>
<INPUT TYPE="RADIO" NAME="s001" VALUE="первый" > <INPUT TYPE="RADIO" NAME="s001" VALUE="второй" > <INPUT TYPE="RADIO" NAME="s001" VALUE="третий" HECKED> </FORM>
…
На рис. 82 показано, как будет выглядеть форма в окне браузера.