Лабораторная работа № 5
Тема: Создание форм.
Цель работы: Изучить и приобрести практические навыки в создании форм
HTML - страницах.
Теоретические сведения
Пространство Web содержит миллионы форм, но каждая из них управляется одним и тем же набором дескрипторов разметки. Web-формы могут быть простыми и сложными и т. д. Но все они подразделяются на:
- формы поиска; формы сбора данных.
Формы поиска позволяют выполнять поиск по сайту или по всему Web-пространству.
Формы сбора данных, работают с информацией в таких областях деятельности, как техническая поддержка, интерактивная торговля, настройка сайта и т. д.
FORM (ФОРМА) - заполняемая форма.
Заполняемая форма, используется для таких действий пользователя, как регистрация, упорядочение пользователя или формирование запроса. Формы могут содержать широкий диапазон приемов разметки HTML, включая такие виды полей форм, как однострочные или многострочные текстовые поля, группы радиокнопок, переключатели и меню.
Основной синтаксис:
<FORM ACTION="URL">
содержание формы: элементы INPUT и, возможно, элементы TEXTAREA и
SELECT
</FORM>
Возможные атрибуты:
имя атрибута | возможные значения | смысл атрибута | примечания |
ACTION | URL | адрес сервера, который использует форма | сервер HTTP или URL |
METHOD | GET, POST | метод передачи данных, полученных от пользователя, на сервер | по умолчанию - GET |
ENCTYPE | строка | механизм, используемый для кодирования содержимого формы | по умолчанию приложение /x-www-form-url-кодирование |
В качестве содержимого элемента FORM разрешено все, что в пределах элемента BODY (т. е. заголовки, текстовые и блоковые элементы, элементы ADDRESS).
Есть некоторые элементы, которые могут появиться только в пределах элемента FORM. В частности:
INPUT - текстовое одностроковое поле, поля пароля, переключатели, радиокнопки, кнопки установки и перезагрузки, скрытые поля, кнопки выгрузки файла, кнопки изображений и т. д.
Пример:
FORM ACTION="mailto:Jukka. *****@***fi" METHOD=POST>
<SELECT NAME=evaluation>
<OPTION>Very poor
<OPTION>Rather poor
<OPTION>Average
<OPTION>Rather good
<OPTION>Very good
</SELECT>
<P>
<TEXTAREA NAME=Comments ROWS=5 COLS=72></TEXTAREA>
<P>
<INPUT TYPE=SUBMIT VALUE=Send>
</FORM>
TEXTAREA - многострочное поле текстового ввода в форме.
Если в обычном текстовом поле недостаточно места для информации, которая запрашивается у пользователя, то вместо него можно создать текстовый блок.
Область ввода, отображается в виде отдельного прямоугольника, возможно, имеющего свой фоновый цвет и обычно со скроллингом некоторого типа, как в вертикальном, так и в горизонтальном направлении. Область инициализирована содержимым элемента TEXTAREA, использующим одноразмерный шрифт.
Основной синтаксис:
<TEXTAREA NAME=имя ROWS=m COLS=n>
текст
</TEXTAREA>
Возможные атрибуты:
имя атрибута | возможные значения | смысл | примечания |
NAME | строка | имя, которое используется для идентификации поля с текстовым содержимым, когда форма передается серверу | обязательно |
ROWS | целое | количество линий видимого текста | обязательно |
COLS | целое | число, задающее видимую ширину текста | обязательно |
Пример:
<TEXTAREA NAME=address ROWS=4 COLS=40>
Your address here...
</TEXTAREA>
SELECT (ВЫБРАТЬ) - меню выбора в форме.
Предоставляет пользователю возможность выбора одного или нескольких элементов из большого количества вариантов.
Типичным отображением выбора элемента FORM является меню, которое может быть "активизировано" некоторым зависящим от броузера образом; обычно в графических броузерах это означает ниспадающее меню. В зависимости от броузера все варианты выбора могут быть видимы одновременно или пользователь может просматривать элементы меню.
Основной синтаксис:
<SELECT NAME=имя>
элементы OPTION
</SELECT>
Возможные атрибуты:
имя атрибута | возможные значения | смысл | примечания |
NAME | строка | имя, которое используется для идентификации выбора меню, когда форма передается серверу | обязателен; каждая отобранная опция образует пару имя/значение, включаемую в содержимое формы |
SIZE | целое | устанавливает число одновременно видимых опций | используется, когда задан MULTIPLE |
MULTIPLE | MULTIPLE | означает, что пользователь может сделать множественный выбор из меню | по умолчанию разрешен только один выбор |
Пример:
<SELECT NAME="flavor">
<OPTION VALUE=a>Vanilla
<OPTION VALUE=b>Strawberry
<OPTION VALUE=c>Rum and Raisin
<OPTION VALUE=d>Peach and Orange
</SELECT>
Ход работы
1. Создать формы при помощи языка программирования HTML4.0 в Web-странице «Информация» (См. Лабораторная работа №1).
2. При создании форм примените элементы INPUT.
3. При создании форм примените элементы TEXTAREA.
4. При создании форм примените элементы SELECT.
Контрольные вопросы
1. С какой целью создаются формы?
2. Приведите пример основного синтаксиса форм.
3. Какие возможны атрибуты у дескриптора FORM?
4. С какой целью применяется атрибут ACTION?
5. С какой целью применяется атрибут METHOD?
6. С какой целью применяется атрибут ENCTYPE?
7. Приведите возможные значения атрибутов ACTION, METHOD, ENCTYPE.
8. Что обозначает элемент TEXTAREA?
9. Какие атрибуты имеет элемент TEXTAREA?
10. Что обозначает элемент INPUT?
11. Какой атрибут имеет элемент INPUT?
12. Что обозначает элемент SELECT?
13. Какие атрибуты имеет элемент SELECT?
14. При помощи, каких атрибутов можно управлять размером текстового поля?
15. При помощи какого атрибута можно ограничить количество вводимых символов?
Литература
Симонович . Базовый курс. – Питер. 2005. , , Патланжоглу информатики. – Киев.2005. Минник. XHTML. - Издательский дом «Вильямс». Москва-Санкт-Петербург-Киев.2006. Полонская XHTML. Самоучитель. – Издательский дом «Вильямс». Москва.2005 HTML4 для чайников. - Диалектика. Москва-Санкт-Петербург-Киев.2006. http://www. /. http://www. /. Конспект лекций.