Веб-технологии и веб-дизайн
.pdfописываются они одинаково с помощью пары тегов <select> </select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибутов тега <select>.
Атрибут name задает имя поля для отправки выбранных пунктов списка на сервер. Атрибут multiple разрешает множественный выбор. Атрибут size определяет, какое количество пунктов списка будет одновременно отображено на экране. При этом, если атрибут multiple не задан и size=1, то на экране отображается раскрывающийся список, если же задан атрибут Multiple или значение size больше 1, то список отображается развернутым.
Раскрывающийся список выбора
Раскрывающиеся списки выбора по своему назначению соответствуют переключателям, в то же время их использование предпочтительно в тех случаях, когда количество вариантов выбора достаточно велико. Как правило, при выборе более чем из трех вариантов желательно вместо переключателей использовать раскрывающиеся списки.
В следующем примере создан простой раскрывающийся список выбора ноутбука по производителю.
<html>
<body>
<form>
Выбор ноутбука по производителю:
<select name="notebook"> <option value="acer">Acer <option value="asus">Asus <option value="compaq">Compaq <option value="hp">HP
<option value="sony">Sony <option value="toshiba">Toshiba
</select>
</form>
</body>
</html>
Необходимо заметить, что по умолчанию выбирается первое значение из списка. При помощи атрибута selected тега <option> это значение можно изменить. Следующий пример показывает раскрывающийся список выбора размера экрана ноутбука с предварительно установленным значением "15.4".
Развернутый список выбора
Развернутые списки используются, как правило, при необходимости множественного выбора значений. В следующем примере раскрывающийся список выбора ноутбука по производителю преобразован в развернутый список с возможностью множественного выбора.
<html>
<body>
<form>
Выбор ноутбука по производителю:
91
<select name="notebook" multiple> <option value="acer">Acer <option value="asus">Asus <option value="compaq">Compaq <option value="hp">HP
<option value="sony">Sony <option value="toshiba">Toshiba
</select>
</form>
</body>
</html>
Необходимо отметить, что для списков с множественным выбором значение атрибута size по умолчанию устанавливается равным 6, кроме того, ни одно из значений не является выбранным по умолчанию.
Текстовая область
В отличие от текстового поля <input type=text> текстовая область позволяет вводить многострочный текст большого объема. Такие области часто используются при вводе сообщений, комментариев.
Текстовая область описывается при помощи тегов <textarea> </textarea>, между которыми можно разместить предварительно отформатированный стандартный текст. Атрибуты cols и rows задают размер видимой области текстового поля.
Заданное значение высоты не ограничивает общий объем вводимого текста, а влияет только на размер отображаемой на экране текстовой области.
Для просмотра всего текста необходимо воспользоваться полосой прокрутки.
Внешний вид форм
Существуют различные способы оформления внешнего вида форм. Один из них основан на использовании пары тегов <fieldset> </fieldset>, которые позволяют объединить тематически близкие и рядом расположенные поля формы в группу и выделить ее визуально. Другой способ основан на применении стандартных средств форматирования HTML, включая цветовое и шрифтовое оформление, графику, таблицы и т.п.
Группировка полей формы
Теги <fieldset> </fieldset> объединяют поля формы в группы, выделяют их визуально, упрощают навигацию в форме с помощью клавиши [Tab] (в первую очередь обходятся поля в пределах группы). Для того чтобы объединить несколько элементов ввода или управления в группу достаточно поместить их внутри тегов <fieldset> </fieldset>. Закрывающий тег </fieldset> обязателен.
При помощи пары тегов <legend> </legend> образованной группе полей можно присвоить имя. В следующем примере форма ввода дополнена полями для ввода информации о месте работы и занимаемой должности, объединенными во вторую группу. Каждой группе полей присвоен свой заголовок.
92
10.2 Задание и порядок выполнения работы
1)С помощью редактора Блокнот воссоздать интерактивную форму, представленную на рисунке 10.1. Действие по нажатии на кнопку Отправить: пересылка формы на адрес электронной почты, который задан в описании тега
FORM.
2)Создать свою собственную интерактивную форму, которая бы содержала все известные элементы управления.
Рисунок 10.1 – Задание на создание интерактивной формы
10.3 Структура отчета и требования к оформлению
1)задание;
2)текст программы;
3)скриншоты отображения в браузере;
4)выводы.
10.4 Контрольные вопросы
1.Что такое интерактивная форма?
2.Какой используется элемент HTML для создания формы?
3.Каковы методы отправки данных формы?
4.Можно ли отправить данные формы на адрес электронной почты?
5.Какие элементы управления могут быть установлены на форме?
6.Основные атрибуты элементов управления формы.
93
СПИСОК РЕКОМЕНДОВАННЫХ ИСТОЧНИКОВ
1.Информатика. Базовый курс / под ред. С. В. Симоновича. – 2-е издание. –
СПб. : Питер, 2004. – 640 с. : ил.
2.Чиртик А. А. HTML. Популярный самоучитель / А. А. Чиртик. – СПб. :
Питер, 2006. – 224 с. : ил.
3.Бройдо В. Л. Вычислительные системы, сети и телекоммуникации : учебник для вузов / В. Л. Бройдо. – 2-е изд. – СПб. : Питер, 2004. – 703 с. : ил.
4.Дронов В. А. JavaScript в Web-дизайне / В. А. Дронов. – СПб. :
Издательство BHV, 2001. – 880 с. : ил.
5.Квинт И. HTML, XHTML и CSS на 100% / И. Квинт. – СПб. : Питер, 2010. – 384 с. : ил.
6.Хейз Д. Освой самостоятельно HTML. 10 минут на урок : пер. с англ. / Д. Хейз. – 4-e издание. – М. : ООО «И. Д. Вильямс», 2007. – 272 с. : ил.
7. Алексеев А. П. Введение в Web-дизайн : учебное пособие / А. П. Алексеев. – М. : СОЛОН-ПРЕСС, 2008. – 192 с. : ил.
8. Новиков А. SSI – что, когда и как? [Электронный ресурс] / А. Новиков,
А. Юрченко. – Режим доступа : http://www.webclub.ru/archive/technology/article124.html
9. Ломов А. Ю. HTML, CSS, скрипты : практика создания сайтов / А. Ю. Ломов. – СПб. : БХВ-Петербург, 2006. – 416 с. : ил.
10. Комолова Н. В. HTML : самоучитель / Н. В. Комолова. – СПб. : Питер,
2008. – 268 с. : ил.
11. Паттерсон Л. Использование HTML 4 / Л. Паттерсон, Б. Слоан, С. Шарльворе. – М. : Вильямс, 2002. – 400 с. : ил.
12.Мальчук Е. В. HTML и CSS : самоучитель / Е. В. Мальчук. – М. : Издательский дом «Вильямс», 2008. – 416 с. : ил.
13.Стауфер Т. Создание веб-страниц : самоучитель / Т. Стауфер. – СПб. :
Питер, 2003. – 448 с. : ил.
94