ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 4

Тема: «Создание форм в HTML»

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

Задание 1

Создать форму вида:

1. В теле html-документа создайте тег form:

А в нем тег table – данную форму необходимо оформить в таблице.

Границы и их толщину у таблицы задайте равными 0. А значение cellpadding (значение расстояния от рамки таблицы до содержимого ячейки) равным 10. Задайте цвет фона таблицы через атрибут bgcolor="PowderBlue".

2. Создание верхней полосы формы.

Задайте цвет фона строки bgcolor="DeepSkyBlue". В теге для создания столбца задайте высоту равную 5 и colspan равный 2 (объединение двух столбцов).

3. Создание 1-ой строки

Создаем следующую строку, в которой будет первая ячейка с содержимым (текстом) «Имя». А во второй ячейке создаем текстовое поле:

4. Аналогично создаем все последующие строки, содержащие Фамилию, Отчество, Телефон, Адрес и соответствующие текстовые поля к ним.

5. Отделяем текстовые поля от кнопок, как и в пункте 2.

6. Создание кнопок.

Создаем следующую строку, задаем ей определенный цвет. В столбце указываем colspan равный 2 (объединение двух столбцов) и задаем выравнивание по центру.

Создание кнопки «Сброса», которая при нажатии на нее, возвращает всем полям начальные значения (в нашем случае – пустые поля):

Кнопка отправки данных из формы:

7. Создаем нижнюю синюю полосу, как и в пункте 2.

8. Закройте теги таблицы и формы.

Код для создания формы выглядит так:

Задание 2

Создать регистрационную форму.

1. Разместите форму в правом нижнем углу страницы.

2. Создайте форму для регистрации аналогично предыдущей форме, при этом задайте ей имя – form2

3. Создание поля для ввода пароля:

С помощью атрибута maxlength (максимальное количество вводимых символов в поле) – задайте для поля ввода пароля максимальную длину – 10 символов.

Задание 3

Используя конспект лекций создать следующие элементы форм.

Они должны располагаться под 1-ой формой (из задания 1).

Сделав несколько отступов от 1-ой формы, напишите подзаголовок: Профессиональные данные

1. Образование (меню из 4 пунктов: среднее, среднее специальное, незаконченное высшее, высшее) – создать с помощью переключателей.

2. Опыт работы (текстовое многострочное поле ввода (окно) высотой 4 строки и шириной 80 колонок);

3. Языки программирования (6 вариантов: Fortran, VBasic, C++. Java, Pascal, Ada) - использовать флажки.

4. Иностранные языки (4 пункта) - использовать флажки.

Оформить поля иностранных языков и языков программирования как таблицы, в ячейки которых поместить названия языков и флажки выбора. В 1-ом столбце – флажки. Во 2-ом столбце – названия языков.

5. Хобби, дополнительная информация (текстовое многострочное поле ввода (окно) высотой 3 строки и шириной 80 колонок).

В браузере выглядит так:

Задание 4. Самостоятельно в новом документе создайте форму следующего вида.

Ширина формы – 50% от окна браузера.

Размещение по центру окна браузера.