Списки и интерактивные формы на Web-страницах
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
- нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
- маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);
- списки определений, позволяющие составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Нумерованные списки. Нумерованный список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:
<OL>
< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
</OL>
Маркированные списки. Маркированный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
<UL TYPE="square">
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.
</UL>
На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.
Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).
 |
| Рис. 6.30. Web-страница "Программы", которая содержит нумерованный список с вложенным маркированным списком |
Список определений. Список определений располагается внутри контейнера <DL>/<DL>. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами <DT> и определений, которые следуют за одинарными тэгами <DD>.
Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):
<DL>
<DТ>Процессор
<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DТ>Оперативная память
<DD>Устройство, в котором хранятся программы и данные.
</DL>
 |
| Рис. 6.31. Web-страница "Словарь", содержащая словарь терминов |
1. Какие тэги используются для создания нумерованных списков? Маркированных списков?
6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.
6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.
Интерактивные формы на Web-страницах
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т. д.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер
В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.
Текстовые поля.
Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.
Текстовые поля создаются с помощью тэга
со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, за-дающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки
Переключатели.
Далее, мы хотим выяснить, к какой группе пользователей относит себя посетитель. Предложим выбрать ему один из нескольких вариантов: учащийся, студент, учитель.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга «INPUT» со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения «учащийся», «студент» и «учитель». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.
Флажки.
Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками.
Флажки создаются с помощью тэга «INPUT» со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="boxl", NAME="box2" и т. д.
Еще одним обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail» и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно пере-дается серверу.
Поля списков.
Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант.
Для реализации раскрывающегося списка используется контейнер
, в котором каждый элемент списка определяется тэгом
.
В переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибута
SELECTED.
Текстовая область.
В заключение поинтересуемся, что хотел бы видеть посетитель на наших страницах, какую информацию следовало бы в них добавить. Так как мы не можем знать заранее, насколько обширным будет ответ читателя, отведем для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно длинный текст.
Создается текстовая область с помощью тэга
с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.
Отправка данных из формы.
Отправка введенной в фор-му информации осуществляется с помощью щелчка по кнопке.
Кнопка создается с помощью тэга "INPUT". Атрибуту TYPE необходимо присвоить значение «submit», а атрибуту VALUE, который задает надпись на кнопке, присвоить значение «Отправить».
Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера "FORM" надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:
Контрольные вопросы
1. Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей?
2. Какие значения необходимо присвоить атрибутам тэга