Лабораторная работа № 7. Программирование форм

Цель работы: научиться создавать формы, указывать обработчиков форм; создавать элементы управления формы; закрепить навыки, полученные при создании таблиц.

Содержание лабораторной работы

1. Создать форму для заполнения анкеты. Обратить внимание, что страница с анкетой сверстана в виде таблицы с невидимой рамкой.

Ваше имя:
Пароль: (может содержать только цифры и буквы латинского алфавита)
Дата регистрации:			1			январь		
Пол:			 мужской
			 женский
Желаю регулярно получать спам на свой почтовый ящик							Да
							Нет
Сколько писем в день Вы обычно получаете?			 одно-два
			 до 10
			 очень много
Укажите, каким компьютерным направлением Вы увлечены?				Компьютерная графика (дизайн)
				Проектирование
				Программирование
				Набор текста
				Игры
				Общение в сети
Ваши пожелания к работе почтовой системы											
											
Аватарка (размером 100 х 100)
									Обзор…
Отправить данные		Очистить форму

(при нажатии кнопки "Отправить данные" информация из формы отправляется в электронный почтовый ящик студента)

2. Сохранить анкету в файле lab7.html.

3. Создать поля для ввода имени пользователя и пароля пользователя (символы, вводимые в поле Пароль должны отображаться звездочками). Вставка полей осуществляется тегом <input> с различными значениями атрибута type.

4. Создать поля для ввода даты рождения. День и месяц рождения выбирается из выпадающего списка, а год вводится вручную в поле ввода, причем количество вводимых символов не должно превышать четыре. Для формирования списка использовать тег <select>, а для задания ограничения на количество вводимых символов атрибут maxlength тега <input>.

5. Создать переключатели для выбора пола. Реализовать возможность выбора только одного варианта. Использовать тег <input>.

6. Создать список с возможностью выбора Да или Нет.

7. Создать переключатели для выбора количества писем получаемых в день.

8. Создать флажки с возможностью выбора нескольких элементов интересов, причем два из них установлены по умолчанию.

9. Добавить поле для ввода нескольких строк текста с дополнительной информацией о пользователе. Поле должно иметь размеры 7 строк и 30 столбцов. Для вставки такого поля используйте тег <textarea>.

10. Создать поле с кнопкой "Обзор" для загрузки файла изображения.

11. Создать две кнопки. Первую для передачи данных формы на электронный почтовый ящик студента, а вторую для очистки формы.

12. Добавить ссылку на файл lab7.html в файл index.html.

13. Показать и защитить выполненную работу преподавателю.

Контрольные вопросы

1. В какой тег заключаются все элементы управления?

2. Какой атрибут тега <form> указывает на файл, который будет обрабатывать данные формы?

3. Какие существуют значения атрибута type в теге <input>?

4. В чем отличия тега <input type=”reset”> и <input type=”submit”>?

5. Как добавить на форму переключатель?

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

7. Сколько тегов необходимо, чтобы вывести на экран поле ввода для указания пути к файлу и кнопки обзор?

8. Какие существуют методы передачи данных формы на сервер?

9. Как осуществляется обработка форм?

10. За счет чего переключатели можно разбивать на группы?

11. Какой атрибут тега <input> позволяет указать значение, которое будет заполнено при первом отображении формы?

12. Для чего предназначен атрибут checked?