Лабораторная работа №7. «Формы в html-документе»

Задание 7.1. Изучите материал темы «Формы в HTML-документе.

Формы в html-документе Создание форм

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

Объединение логически связанных между собой элементов управле­ния в HTML-документе называется формой.

Для создания формы применяется тег-контейнер <FORM>…</FORM> с атрибутом action=" ", в котором содержится адрес, по которому бу­дут отправлены данные с формы.

Внутри тега <form> могут размещаться элементы управления, кото­рые создаются непарным тегом <INPUT>. Атрибут type задает тип элемента:

<input type="text" > – создание текстового поля;

< input type="checkbox "> – создание переключателей-флажков ();

<input type="radio"> – создание кнопок выбора ();

<input type="submit "> – создание кнопки для отправки данных из формы;

<input type="reset "> – создание кнопки для очистки полей формы.

Парный тег <TEXTAREA cols="n" rows="m"> позволяет создавать многострочные текстовые поля. Его атрибуты задают количество столбцов и строк в поле.

Для создания выпадающих списков используется тег-контейнер <SELECT>. Элементы списка задаются тегом <OPTION>. Все элементы управления имеют атрибут name, который определяет имя элемента при передаче данных из формы, а также позволяет объеди­нить переключатели и кнопки выбора в группы. Атрибут checked отве­чает за установку флажка или переключателя.

Задание 7.2. Запишите определения основных понятий в тетрадь.

Коротко о главном

Форма – это объединение логически связанных между собой элементов управле­ния в HTML-документе.

<FORM>…</FORM> – теги создания формы

<INPUT> – тег создания элементов управления

<SELECT>… </SELECT> – теги для создания выпадающих списков

<TEXTAREA cols="n" rows= "m">… <TEXTAREA> – теги для создания многострочного тек­стового поля

Задание 7.3.

• Вставьте в HTML-документ start.html, находящийся в папке «Фамилия фрагмент сайта», предложенный ниже фрагмент пред закрывающим тегом </BODY>.

<HR>

Уважаемые покупатели!!!<BR>

Чтобы заказать книгу в нашем магазине, Вы должны зарегистрироваться.<BR>

Заполните, пожалуйста, форму и сделайте запись в книге посетителей.

<FORM action="">

<PRE>

Фамилия: <INPUT type="Cext" size="60">

Имя: <INPUT type="text" size="60">

<BR> <BR>

</PRE>

Образование:

<INPUT type="radio" name="obr" checked>Высшее

<INPUT type="radio" name="obr">Среднее

<BR><BR>

Интересующий раздел:

<SELECT type="text">

<OPTION selected>Детская

<OPTION>Научная

<OPTION>Справочная

<OPTION>Художественная

</SELECT>

<BR><BR>

Книга посетителей:<BR>

<TEXTAREA rows="3" cols="60"> Оставьте отзывы о нашем магазине</TEXTAREA> <BR><BR>

<INPUT type="submit">

<INPUT type="reset">

</FORM>

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

Задание 7.4.

• Создайте свою страничку, содержащую формы.