6.3. Комбинирование форм и таблиц
Использование таблиц при создании форм является весьма эффективным средством для выравнивания полей ввода и информации.
Приведем пример оформления переключателей и кнопок в ячейках таблицы (рис. 6.7). Ниже указан HTML-код и его отображение (рис. 6.8).
Рис. 6.7. Оформление элементов управления
Рис. 6.8. Совместное использование таблиц
и элементов управления
<HTML>
<HEAD>
<TITLE>Использование списка</TITLE>
</HEAD>
<BODY>
<FORM ACTION="http://www.earthwed.com/cgi-bin/s97r"
METHOD="post" ENCTYPE="text/plain">
<TABLE border="1" cellspadding="10" cellspacing="0"
bgcolor="#dfd9bb">
<TR>
<TD COLSPAN="3">
Ваша оценка сайта.
</TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="ocenka"
VALUE="super">отличная
</TD>
<TD>< INPUT TYPE="radio" NAME="ocenka"
VALUE="good">хорошая
</TD>
<TD>< INPUT TYPE="radio" NAME="ocenka"
VALUE="bad">плохая </TD>
</TR>
<TR>
<TD COLSPAN="3">
<INPUT TYPE="submit "NAME="vote" VALUE="голосовать">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
* * *
В теоретической части главы было дано понятие формы и возможность ее создания при использовании тега <FORM>. Форма позволяет разработчикам сайта интерактивно взаимодействовать с посетителями своих страниц. Были рассмотрены элементы управления, при помощи которых и происходит это взаимодействие. Для размещения элементов управления использовались специальные теги <INPUT>, <SELECT>, <TEXTAREA> с их основными атрибутами.
Практическое задание создание формы
Практическим заданием будет создание формы «Анкета пользователя» (рис. 6.9). Чтобы создать форму, выполните следующую последовательность действий.
Для начала создайте «скелет» web-страницы.
<HTML>
<HEAD>
<TITLE>Создание формы</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Задайте в теге <BODY>фон белого цвета и черные буквы, используя атрибуты BGCOLOR и TEXT. Затем уже в теле страницы напишите «Анкета пользователя», используя заголовок второго уровня (Н2). После этого установите тег создания формы <FORM> </FORM>с нужными атрибутами. Внутри этого тега сформируйте таблицу (<TABLE>), состоящую из пяти строк (<TR>). В таблице задайте невидимый бордюр (BORDER) и выравнивание по центру (ALIGN). Затем в первую и третью строку вставьте по две заголовочные ячейки (<TH>), у каждой ячейки фон (BGCOLOR) серого цвета и ширина (WIDTH) относительно окна браузера занимает 50 %. В эти ячейки внесите текст согласно образцу (рис. 6.9).
Теперь заполним вторую строку таблицы. Для этого в ней создайте две ячейки тегами <TD></TD>. Для каждой ячейки задайте светло-светло-серый фон (BGCOLOR) и относительную ширину (WIDTH) в 50 %. В первую ячейку с помощью тега <INPUT> вставьте два текстовых поля (TYPE="text") и один элемент ввода пароля (TYPE="password") с соответствующим текстом над ними, заканчивающимся переводом строки (<BR>). Во вторую ячейку вставьте флажки (TYPE="checkbox") также с помощью тега <INPUT> и соответствующими надписями. Не забудьте указать атрибуты NAME и VALUE для каждого флажка.
В четвертую строку вставляете также две ячейки, как и во второй строке. Затем в первую ячейку с помощью тега <SELECT> вставляете список из пяти стран: Россия, Англия, США, Франция, Италия. Каждую строку списка оформляете тегом <OPTION>. Обязательным параметром в строке списка должен быть атрибут VALUE. Списку должна предшествовать надпись «Страна». Все то же самое сделайте и для городов: Москва, Санкт-Петербург, Казань, Красноярск, Хабаровск, Иркутск. Во вторую ячейку этой строки вставляем многострочное поле с помощью тега <TEXTAREA>, состоящее из 5 строк и 25 символов каждая. Затем тегом <INPUT> вставляем два переключателя (TYPE="radio") с надписями, согласно рис. 6.9.
В пятую строку помещаем одну ячейку, для которой должны объединить два столбца в один (COLSPAN), выровнять (ALIGN) содержимое по центру и задать цвет фона (BGCOLOR) серый. В ячейку вставляем две кнопки «Отправить» (TYPE="submit") и «Очистить» (TYPE="reset"). Между кнопками должен быть пробел ( ).
Анкета пользователя
|
Личные данные |
Увлечения |
|
Ваше имя
Ваш e-mail
Ваш пароль
|
– Интернет-общение – Литература и искусство – Музыка и кино – Танцы – Спорт – Автомобили – Путешествия
|
|
Место жительства |
Комментарии |
|
Страна
Город
|
Превосходный
сайт
|
|
| |
Рис. 6.9. Вид анкеты пользователя
Откройте вашу страницу в браузере. Если есть несоответствия, то исправьте их согласно образцу (рис. 6.9). Сохраните HTML-документ в файле под именем anketa.htm.