Создание формы

Практическим заданием будет создание формы «Анкета пользователя» (рис. 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"). Между кнопками должен быть пробел (& nbsp).

Анкета пользователя

Личные данные	Увлечения
Ваше имя Ваш e-mail Ваш пароль	– Интернет-общение – Литература и искусство – Музыка и кино – Танцы – Спорт – Автомобили – Путешествия
Место жительства	Комментарии
Страна Город	Превосходный сайт

Рис. 6.9. Вид анкеты пользователя

Откройте вашу страницу в браузере. Если есть несоответствия, то исправьте их согласно образцу (рис. 6.9). Сохраните HTML-документ в файле под именем anketa.htm.

Контрольные вопросы и задания

1. Что можно назвать формой?

2. Какой тег используется для задания формы?

3. Назовите основные атрибуты тега < FORM >. Для чего каждый из них предназначен?

4. С помощью каких тегов помещаются элементы управления на форму?

5. Как задать текстовую строку на форме?

6. Перечислите основные атрибуты при использовании элемента «пользовательский пароль»?

7. С помощью чего можно задать группу флажков на форме?

8. Как можно связать изображение флажка с его надписью?

9. В чем суть элемента переключателя и как он устанавливается на форму?

10. Каким атрибутом отмечается один из переключателей в списке?

11. Можно ли связать элемент переключателя с его надписью?

12. Назовите виды кнопок, которые можно разместить на форме?

13. Что означает атрибут VALUEпри создании кнопок?

14. Чем отличается создание графической кнопки от обычной?

15. Для чего предназначен тег < TEXTAREA >?

16. С помощью каких тегов задаются строки списка на форме?

17. Что означает атрибут SELECTEDпри его использовании?

18. Что дает применение таблиц при размещении элементов управления на форме?