1896
.pdf
Рис. 82. Вид Web-страницы в окне браузера
Атрибут CHECKED определяет, какой из переключателей должен быть выбран по умолчанию.
2. Выбор нескольких переключателей
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"> <H3> Переключатели </H3>
<INPUT TYPE="RADIO" NAME="s001" VALUE="первый" > <INPUT TYPE="RADIO" NAME="s002" VALUE="второй" > <INPUT TYPE="RADIO" NAME="s003" VALUE="третий"> </FORM>
…
На рис. 83 показано, как будет выглядеть форма в окне браузера.
Рис. 83. Вид Web-страницы в окне браузера
Создание кнопок отправления и очистки формы
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST" ACTION="MAILTO:sss@mail.ru"> <P ALIGN="CENTER">
<TEXTAREA NAME="text00" ROWS="5" COLS="30"> </TEXTAREA>
<BR>
<BR>
<INPUT TYPE="SUBMIT" VALUE="переслать форму"> <INPUT TYPE="RESET" VALUE="очистить форму"> </FORM>
…
На рис. 84 показано, как будет выглядеть форма в окне браузера.
Рис. 84. Вид Web-страницы в окне браузера
Если заполнить текстовое окно и щелкнуть мышью по кнопке «переслать данную форму», то форма будет отправлена на электронный адрес: sss@mail.ru. Если щелкнуть мышью по кнопке «очистить данную форму», то в текстовом окне удалится запись и форма снова будет готова к заполнению.
Создание сложной формы
Рассмотрим на примере: необходимо заполнить анкету и отправить.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251">
<TITLE>The form</TITLE> </HEAD>
<BODY>
<FONT COLOR="RED"> <B>
<P ALIGN="CENTER">
Проводится социологический опрос. Хотелось бы узнать, какое место в вашей жизни занимает Интернет. Заполните и отправьте нам анкету.
</B>
</FONT>
<FORM METHOD="POST" ACTION="MAILTO:volkov@newmail.ru"> <B><P ALIGN="JUSTIFY">
Ваше имя:</B>
<INPUT TYPE="TEXT" NAME="NAZ" SIZE="40"> <P ALIGN="JUSTIFY"><B>
Ваш адрес (E-mail):</B>
<INPUT TYPE="TEXT" NAME="EMAIL" SIZE="20"> <B><P ALIGN="JUSTIFY">
1. Как часто вы пользуетесь Интернетом?</B><BR>
<INPUT NAME="1Z" TYPE="CHECKBOX">Менее 2 часов в неделю <INPUT NAME="2Z" TYPE="CHECKBOX">От 5 до 10 часов в неделю <INPUT NAME="3Z" TYPE="CHECKBOX">Более 10 часов в неделю <B><P ALIGN="JUSTIFY">
2.Используете ли вы Интернет на работе?</B><BR> <INPUT NAME="1R" TYPE="RADIO">Да
<INPUT NAME="2R" TYPE="RADIO">Нет <B><P ALIGN="JUSTIFY">
3.Есть ли у вас дома Интернет?</B><BR>
<INPUT NAME="1I" TYPE="RADIO">Да
<INPUT NAME="2I" TYPE="RADIO">Нет <B><P ALIGN="JUSTIFY">
Ваши комментарии, вопросы, пожелания: </B> <TEXTAREA NAME="TEXT03" ROWS="4" COLS="10"> </TEXTAREA>
<CENTER>
<BR>
<INPUT TYPE="SUBMIT" VALUE="переслать анкету"> <INPUT TYPE="RESET" VALUE="очистить анкету"> </CENTER>
</FORM>
</BODY>
</HTML>
На рис. 85 показано, как будет выглядеть форма в окне браузера.
Рис. 85. Вид Web-страницы в окне браузера
1.7.3. MAILTO
Посетитель Web-страницы может связаться с ее создателем еще одним способом по электронной почте. В Web-страницу можно включить значок или текст, после щелчка мышью по которому будет автоматически отправлено сообщение по указанному электронному адресу.
Это тег <A HREF="MAILTO:e-mail">
Рассмотрим два примера.
1. Текстовое сообщение (рис. 86).
…
<A HREF="MAILTO:volkov@newmail.ru">
Отправьте свое сообщение по почте
</A>
…
Рис. 86. Вид Web-страницы в окне браузера
2. Графика и текстовое сообщение (рис. 87).
…
<A HREF="MAILTO:volkov@newmail.ru">
<img src="p.gif">Отправьте свое сообщение по почте</A>
…
Рис. 87. Вид Web-страницы в окне браузера
Замечание: рассмотренный случай применяется в браузере Internet Explorer.
Контрольные вопросы
1.Каким образом применяются формы на Web-страницах?
2.Какие теги используются для создания форм?
3.Для чего необходимы ключевые слова METHOD и ACTION в теге
<FORM>?
4.Как создается элемент формы: текстовое окно? Приведите пример его использования.
5.Как создается элемент формы скролируемое меню? Приведите пример его использования.
6.Как создается элемент формы текстовая строка? Приведите пример ее использования.
7.Как создается элемент формы «флажок»? Приведите пример его использования.
8.Как создается элемент формы строка для ввода пароля?
9.Как создается элемент формы RADIO кнопка? Приведите пример ее использования.
10.Как создать кнопки для пересылки и очистки данных формы?
11.Перечислите и охарактеризуйте способы создания MAILTO.
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 88):
Рис. 88. Вид Web-страницы в окне браузера
2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 89):
Рис. 89. Вид Web-страницы в окне браузера
1.8. ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ НА WEB-СТРАНИЦЕ
1.8.1. Основные теги создания фреймов
При создании страниц с фреймами разрабатывается несколько HTMLфайлов. Прежде чем создавать Web-страницу с фреймами, рассмотрим теги (табл. 21).
|
Таблица 21. Теги создания фреймов |
|
Теги |
Комментарий |
|
1 |
2 |
|
<FRAMESET >…</FRAMESET> |
Предваряет тег <BODY> в документе, |
|
|
содержащем фреймы |
|
<FRAME> |
Задает файлы в наборе фреймов |
|
<NOFRAMES>…</NOFRAMES> |
Определяет, что будет в окне браузера, если он |
|
|
не поддерживает фреймы |
|
|
|
Окончание табл. 21 |
||
1 |
|
2 |
|
|
<FRAMESET BORDER=" "> |
Задает размер обрамления фреймов |
|
||
<FRAMESET ROWS=" "> |
Определяет строки в таблице фреймов, высота |
|
||
|
которых определена количеством пикселей или |
|
||
|
в процентном соотношении к высоте таблицы |
|
||
|
фреймов. В качестве значения может |
|
||
|
использоваться символ "*" для обозначения |
|
||
|
оставшейся части экрана |
|
|
|
<FRAMESET COLS=" "> |
Определяет столбцы в таблице фреймов, |
|
||
|
ширина которых определена |
количеством |
|
|
|
пикселей или в процентном соотношении к |
|
||
|
ширине таблицы фреймов. В качестве значения |
|
||
|
может использоваться символ "*" для |
|
||
|
обозначения оставшейся части экрана |
|
||
<FRAMESET |
Задает цвет обрамления фреймов |
|
|
|
BORDERCOLOR=" "> |
|
|
|
|
<FRAMESET |
Задает границы деления окна (yes или 1 – |
|
||
FRAMEBORDER="yes/no"> |
граница деления экрана на фреймы видна, no |
|
||
или |
или 0 – граница деления экрана на фреймы не |
|
||
<FRAMESET |
видна) |
|
|
|
FRAMEBORDER="1/0"> |
|
|
|
|
<FRAMESET |
Задает промежутки между смежными окнами |
|
||
FRAMESPACING=" "> |
|
|
|
|
<FRAME NAME="name"> |
Определяет имя фрейма |
|
|
|
<A HREF="*.htm" |
TARGET – определяет место, где должен |
|
||
TARGET=" ">…</A> |
отобразиться файл *.htm при активизации |
|
||
|
гиперссылки. |
|
|
|
|
Принимает значения: |
|
|
|
|
– |
name - файл *.htm загружается |
во фрейм с |
|
|
именем name; |
|
|
|
|
– _blank - файл *.htm загружается во вновь |
|
||
|
открытое окно браузера, не содержащего имени |
|
||
|
фрейма; |
|
|
|
|
– |
_self - файл *.htm загружается в то же окно, |
|
|
|
где находится гиперссылка; |
|
|
|
|
– |
_parent - файл *.htm загружается в |
|
|
|
родительское окно фрейма; |
|
|
|
|
– _top - файл *.htm загружается в окно, |
|
||
|
содержащее гиперссылку с заменой всех |
|
||
|
фреймов, отображенных в данный момент |
|
||
<FRAME NORESIZE> |
Препятствует изменению размеров фрейма |
|
||
<FRAME SCROLLING=" "> |
Указывает, будет ли выводиться линейка |
|
||
|
прокрутки в фрейме, принимает значения: |
|
||
|
«yes» – полосы прокрутки создаются в |
|
||
|
обязательном порядке; «no» – полосы |
|
||
|
прокрутки запрещены; «auto» – полосы |
|
||
|
прокрутки появляются по мере необходимости |
|
||
|
|
Окончание табл. 21 |
|
1 |
2 |
|
|
<FRAME SRC="URL"> |
Определяет, какой из HTML-файлов будет |
|
|
|
показан в данном фрейме |
|
|
<FRAME MARGINWIDTH=" "> |
Определяет величину отступов по левому и |
|
|
|
правому краям фреймов; |
должно быть равно |
|
|
или больше 1 |
|
|
<FRAME MARGINHEIGHT=" "> |
Определяет величину отступов по верхнему и |
|
|
|
нижнему краям фреймов; |
должно быть равно |
|
|
или больше 1 |
|
|
1.8.2. Разбиение окна браузера на области
Прежде чем создавать Web-страницу с фреймами, необходимо продумать разбиение главного окна браузера на области. Приведем несколько примеров такого разбиения.
Пример 1: деление окна браузера по вертикали пополам (рис. 90).
…
<FRAMESET COLS="50%,50%">
…
</FRAMESET>
…
Рис. 90. Деление окна браузера
Пример 2: левая область окна браузера по вертикали в три раза меньше правой (рис. 91)
…
<FRAMESET COLS="25%,75%">
…
</FRAMESET>
…
Рис. 91. Деление окна браузера
Пример 3: для верхней горизонтальной области окна браузера отведено 150 пикселей, для средней – 30 процентов, для нижней – все оставшееся пространство (рис. 92).
…
<FRAMESET ROWS="150,30%,*">
…
</FRAMESET>
…
Рис. 92. Деление окна браузера