Лабораторная работа №4

Тема: «Создание форм в html-документа».

Цель работы: изучить основные тэги для создания форм в html-документе.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

<FORM>…</FORM> {создание формы}

<INPUT> - для ввода одной строки текста или одного слова

<INPUT> TYPE=”text” – создает текстовое поле

Атрибут NAME служит для идентификации полученной информации

Атрибута SIZE задает длину поля ввода в символах

<INPUT> TYPE=”radio” – создает переключатели (радиокнопки)

Атрибут VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO

Атрибут CHECKED - задает выбор кнопки по умолчанию

<INPUT> TYPE=”checkbox” – создает флажки

<SELECT>…</SELECT> - реализует раскрывающийся список

<OPTION> - определяется каждый элемент раскрывающегося списка

TYPE = password - определяет окно для ввода пароля.

TYPE = reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.

Ход работы:

1. Используя теги форм создайте анкету(опросный лист) на произвольную тему.

2. В анкете должны быть отображены:

• текстовые поля для ввода имени и фамилии;

• поле пароля;

• поле выбора из списка значений;

• поле для ввода большого количества информации;

• флажки;

• переключатели;

• кнопки сброса и подачи запроса;

Анкета

Фамилия: Имя: Отчество:

Введите пароль:

Введите дату рождения:

Укажите самый удобный способ для связи с вами: Домашний телефон Рабочий телефон Электронная почта

Укажите ваше образование:

Немного о себе:

3. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.

Листинг html-программы:

<HTML>

<HEAD>

<TITLE> Анкета </TITLE>

</HEAD>

<BODY>

<font>

<h1><Align='center'> <u><b> Анкета </b></u> </h1>

</font>

<form>

<font color='blue'>

Фамилия: <br>

<input type='text' name='name' size=30><br>

Имя: <br>

<input type='text' name='name' size=30><br>

Отчество: <br>

<input type='text' name='name' size=30><br>

<hr>

Пароль: <br>

<input type='text' name='password' size=30>

<hr>

Введите дату рождения:<br>

<input type='text' name='name' size=2>

<select name='mounth'>

<option selected> Января

<option> Февраля

<option> Марта

<option> Апреля

<option> Мая

<option> Июня

<option> Июля

<option> Августа

<option> Сентября

<option> Октября

<option> Ноября

<option> Декабря

</select>

<input type='text' name='year' size=4>

<hr>

Укажите самый удобный способ для связи с вами:<br>

<input type='radio' name='group' Value='domtel'> <input type='text' name='name' size=30> <font color='green'> Домашний телефон </font><br>

<input type='radio' name='group' Value='rabtel'> <input type='text' name='name' size=30> <font color='green'>

Рабочий телефон </font><br>

<input type='radio' name='e-mail' Value='elpost'> <input type='text' name='name' size=30> <font color='green'> Электронная почта </font><br>

<hr>

Укажите ваше образование:<br>

<select name='education'>

<option selected> Нигде не учился

<option> Среднее общее образование

<option> Среднее полное образование

<option> Среднее специальное образование

<option> Среднее профессиональное образование

<option> Незаконченное высшее образование

<option> Высшее образование

<option> Два высших образования

</select>

<hr>

Немного о себе:</font> <br>

<textarea name='o sebe' rows=4 cols=30>

</textarea>

<br>

<hr>

<input type='reset' Value='Сброс'>

<input type='submit' Value='Послать'>

</form>

</BODY>

</HTML>