Internet_tehnologii_kurs_lek

Описание не отображается на экране в виде всплывающей подсказки, когда указатель мыши перемещается над таблицей, в отличие от альтернативного текста или атрибута title, используемого в ссылках. Описания могут быть прочитаны только вспомогательным устройством, например читателем экрана для слепого пользователя.

Впримере 4.8 демонстрируется таблица из предыдущего примера, в которую было добавлено описание. Пример 4.8. Добавление описания таблицы

<table width="90%" border="l" cellspacing="5" cellpadding="5" summary="3Ta таблица отображает местности и информацию о связи в них погоды и часового пояса>

<сарЫоп>Соответствие погоды и временного noHca</caption> <tr>

<ЬЬ>Местность</ЬЬ> <ЬЬ>Тиксон, Аризона</Ьп> <th>Jlac Вегас, Невада</Ьп>

</tr>

<tr>

<th>norofla</th> td>5KapKaH< / td> td>Жapкaя</td> </tr> <tr>

<ЬЬ>Часовой пояс</ЬЬ>

<td>fleHb дoлгий</td> <td>CTaHflapTHoe горное epeMH</td> </tr>

</table>

Объединение строк

Впроцессе создания таблицы может понадобиться растянуть один столбец на несколько строк. Для этого используется атрибут rowspan, значение которого определяет количество строк, охватываемых заголовком, или определенной ячейкой таблицы, как показано в примере

4.9.

Пример 4.9. Использование атрибута rowspan для объединения двух строк

<table width="90%" border="l" cellspacing="5" cellpadding="5'

диштагу="Эта таблица демонстрирует объединение строк"> <сарЫоп>Демонстрация объединение строк</сарЫоп>

<tr>

<th го^7Брап="2">Заголовок (объединены 2 строки)</th> td> да нные </1d>

td>данные</td> </tr> <tr>

<th>Зaгoлoвoк (слияния нет)</ЬЬ>

<td>flaHHbie</td>

<td>flaHbme</td>

</tr>

</table>

На рисунке 4.10 демонстрируются строки с объединенным заголовком.

Рис. 4.10. Объединение строк с заголовками

Можно объединять строки и внутри ячеек. Если необходимо растянуть второй столбец на все три строки, это можно сделать при помощи атрибута rowspan соответствующей ячейки таблицы, как показано в примере 4.10.

Пример 4.10. Объединение трех строк в ячейке таблицы

<table width="90%" border="l" cellspacing="5" cellpadding="5" summary=" Эта таблица демонстрирует объединение строк"> <caption> Демонстрация объединение строк </caption>

<tr>

<th rowspan="2">3aronoBOK (объединены 2 строки)</th> <td rowspan="3">flaHHbie (объединены З строки) </td>

<Ь<3>данные< / td></tr>

<tr>

<td>данные</td></tr>

<tr>

<ЬЬ>Заголовок (объединения нет)</ЬЬ>

<td>flaHHbie< / td></tr></table>

Обратите внимание, что все ненужные ячейки таблицы были удалены, как показано на рисунке 4.11.

41

Рис. 4.11. Использование атрибута rowspan для ячейки таблицы

Объединение столбцов

Точно так же, как объединяются строки, можно объединять столбцы. Для этого используется атрибут colspan в заголовке или ячейке таблицы, как показано в примере 4.11.

Пример 4.11. Объединение столбцов в заголовке таблицы

<table width="90%" border="l" cellspacing="5" cellpadding="5" summary="3Ta таблица демонстрирует объединение столбцов"> <сарЫоп>Демонстрация объединения столбцов</сарЫоп>

<tr>

<th со1Брап="2">Заголовок (объединены 2 столбца)</th> <ЬЬ>Заголовок (объединения HeT)</th>

</tr>

<tr> td>flaHHbie< / td> td>flaHHbie< / td>

td>flaHHbie< / td> </tr> <tr>

td>flaHHbie< / td>

td>данные</td> <td>flaHHbie</td> </tr> </table>

На рисунке 4.12 показаны результаты.

Рис 4.12. Объединение двух столбцов в заголовке таблицы

Подобным образом можно объединять ячейки таблицы. В примере 4.12 нижняя ячейка таблицы растягивается на всю строку. Будьте внимательны - различия между атрибутами rowspan и colspan могут вас немного запутать. Просто помните, что объединение строк означает вертикальное объединение, а объединение столбцов - горизонтальное объединение.

Пример 4.12. Объединение трех столбцов

<table width="90%" border="l" cellspacing="5" cellpadding="5" Еиггипагу="Эта таблица демонстрирует объединение столбцов"> <сарЫоп>Демонстрация объединения CTon6i;OB</caption>

<tr>

<th со1Брап="2">Заголовок (объединены 2 столбца)</th> <th> Заголовок (объединения HeT)</th>

</tr>

<tr>

<td>flaHHbie</td> td>данные</td> td>flaHHbie< / td> </tr> <tr>

<td со1Брап="3">данные (объединены З столбца)</td> </tr>

</table>

Результаты приведены на рисунке 4.13.

42

Рис. 4.13. Объединение столбцов ячейки таблицы

Квантовый скачок Когда вы приобретете опыт в структурировании таблиц, поймете, почему использование таблиц для макетов было очевидным решением

для создания сеточной системы, которая легла в основу дизайна сайтов в начале существования Интернета. Посмотрите, как в результате добавления графики и текста в ячейки таблицы и удаления всех границ может получиться эффектный дизайн. Web-дизайнеры, которые сначала изучили данный подход, столкнулись со значительными трудностями при переходе на CSS-макеты, функционирующие совершенно по-другому. Необходимо понимать, что хотя таблицы использовались для макетов, совершивших революцию в Web-дизайне, проблемы, возникающие при применении таблиц, о чем было упомянуто во вступлении к данной главе, не могут сравниться с современными возможностями языка CSS для создания изумительных макетов, чрезвычайно доступных и удобных.

Комбинирование атрибутов colspan и rowspan

Конечно, атрибуты colspan и rowspan можно комбинировать для получения ряда различных таблиц. В примере 4.13 демонстрируется совместное использование объединения столбцов и строк.

Пример 4.13. Комбинирование атрибутов colspan и rowspan <table width="90%" border="l" cellspacing="5" cellpadding="5"

summary=""3Ta таблица комбинирует объединение столбцов и строк"> <сарЬ1оп>Комбинирования объединения столбцов и cTpoK</caption> <tr>

<th colspan="2" rowspan="2">Заголовок (Объединены 2 столбца и 2 строки)</th>

<td>flaHHbie< / td> </tr>

<tr> <td>flaHHbie< / td> </tr>

<tr>

td>flaHHbie< / td> <td>flaHHbie</td> td>flaHHbie< / td> </tr> </table>

На рисунке 4.14 приведены результаты.

Рис. 4.14. Комбинирование атрибутов colspan и rowspan

Можно смешивать и сопоставлять атрибуты colspan и rowspan в любых воображаемых комбинациях. Два предупреждения: обязательно избавьтесь от всех ячеек и заголовков, перекрываемых объединением, и помните, что чем сложнее становится таблица, тем менее доступной она будет для большинства программ, предназначенных для чтения экрана, которые используются слепыми пользователями или пользователями с нарушением зрения.

Группирование столбцов таблицы: элемент col

Если вы весьма обеспокоены доступностью или если у вас есть широкие таблицы данных, полезно сгруппировать столбцы, чтобы сохранить их организацию и логику. Осуществить группирование столбцов для лучшего управления и доступности можно с помощью двух элементов.

Первым элементом является элемент col. Элемент col - это способ группирования столбцов для задания значений атрибутов или применения стиля.

Элемент col должен располагаться сразу за элементом caption, если таковой присутствует, и поддерживает ряд атрибутов. Особое значение имеет атрибут span, который определяет число столбцов, объединяемых элементом col.

В примере 4.14 демонстрируется использование элемента col с атрибутом span, значение которого равно 2. Обратите также внимание, что был добавлен элемент width, определяющий ширину, и что для элемента col необходимо использование замыкающего слеша: <col />. Пример 4.14. Использование элемента col

для применения значений атрибутов к нескольким столбцам

<table width="90%" border="l" cellspacing="5" cellpadding="5" Бшптагу="Эта таблица рассматривает группирование столбцов"> <сар^оп>Группирование столбцов</сар^оп> <col span="2" width="100" />

<tr>

<^п>Заголовок таблицы</^п> <^п>Заголовок таблицы</^п>

43

<^п>Заголовок таблицы</^п>

</tr>

<tr> <td>flaHHbie< / td> <td>данные</td> <td>flaHHbie</td> </tr>

<tr>

<td>flaHHbie</td>

<td>flaHHbie</td>

<td>flaHHbie</td>

</tr>

</table>

На рисунке 4.15 показано, как сгруппированы первые два столбца. Ширина, определенная в элементе col и равная 100 пикселам, применена к обоим столбцам в объединенной группе.

Рис. 4.15. Группирование столбцов с использованием элемента col

Можно также добавлять и другие атрибуты, отвечающие за представление документа, включая атрибуты align и valign: <col span="2" width="100" align="right" valign="bottom" />

Результаты использования приведенной разметки показаны на рисунке 4.16.

Рис. 4.16. Использование элемента col для применения атрибутов, отвечающих за представление документа, к нескольким столбцам

В данном случае, обратите внимание, что заголовки, принадлежащие группе, как и текст в ячейках таблицы, выровнены по правому краю. Если присмотреться внимательно, можно заметить, что текст в ячейках группы расположен немного ниже текста в правом столбце, который не является частью группы.

Группирование столбцов таблицы при помоши элемента colgroup

Другим способом группирования столбцов является использование элемента colgroup, по существу выполняющего ту же функцию, что и элемент col. В примере 4.15 используется основная таблица из примера 4.14, состоящая из трех столбцов и трех строк, к двум столбцам которой применяются различные значения атрибутов.

Пример 4.15. Использование элемента colgroup

для применения значений атрибутов к нескольким столбцам

<table width="90%" border="l" cellspacing="5" cellpadding="5"

Бшптагу="Эта таблица рассматривает группирование столбцов"> <сарь1оп>Группирование столбцов</сарЬ1оп>

<colgroup align="right" valign="bottom" /> <colgroup align="right" valign="bottom" /> <tr>

<Ьп>Заголовок таблицы</ьЬ> <Ьп>Заголовок таблицы</ьЬ> <Ьп>Заголовок таблицы</ьЬ>

</tr>

<tr>

<td>flaHHbie</td> td>flaHHbie< / td> td>flaHHbie< / td> </tr> <tr>

<td>flaHHbie< / td><td>flaHHbie</td><td>данные</td></tr></table>

Значение атрибута align применяется ко всей группе ячеек таблицы, что позволяет избежать необходимости добавления атрибута к каждой ячейке. Отображаемые результаты точно такие, как и представленные на рисунке 4.16.

Берегитесь поддержки браузерами элементов col и colgroup

44

Обратите внимание, что на рисунке 4.16 вместо моего любимого браузера Mozilla я использовала браузер Internet Explorer. И хотя вообще считается, что браузер Mozilla является лучшим браузером, реализующим стандарты, чем браузер IE, в данном случае поддержка элементов col и colgroup, и их атрибутов у браузера отсутствует. Это справедливо и для многих других браузеров. В связи с этим, использование элементов col и colgroup должно быть ограничено ситуациями, в которых точно известно, что посетители увидят желаемые результаты. Многие дизайнеры предпочитают вовсе не использовать элементы col и colgroup.

Группировка строк таблицы Можно также группировать строки таблицы, используя три элемента, которые определяют группы строк в зависимости от их назначения.

К этим элементам относятся элементы thead, tf oot, tbody, соответственно, для заголовка, нижней части и тела таблицы, как показано в примере 4.16.

Пример 4.16. Группирование строк таблицы

<thead>

<tr>

<ь11>Заголовок таблицы</ЬЬ> <ЬЬ>Заголовок таблицы</ьЬ> <ь11>Заголовок таблицы</ЬЬ>

</tr>

</thead>

<tfoot>

<tr>

<td>0cHOBaHMe тaблицы</td> <td>0cHOBaHMe тaблшды</td> <td>0cHOBaHMe тaблицы</td> </tfoot>

<tbody>

<tr>

<td>Teлo тaблицы</td> <td>Teлo тaблицы</td> <td>Teлo тaблицы</td> </tr>

</tbody>

</tr>

</table>

Рис. 4.17. Группирование по строкам - обратите внимание, что элемент tfoot в документе был определен в середине таблицы, однако строка, определенная как низ таблицы, все равно отобразилась в нижней части таблицы

Поддержка браузером этих элементов является более совместимой. На рисунке 4.17 приведены результаты. Создание форм

формы являются неотъемлемой частью процесса, благодаря которому Интернет стал интерактивным и полезным. Формы интерактивны, поскольку вам, пользователю, для выполнения какой-либо задачи необходимо взаимодействовать с ними. Примерами важных задач являются:

Ввод информации в онлайновую банковскую систему для управления средствами через Интернет. Отправка имени и информации, чтобы стать членом онлайновой службы знакомств.

Покупка билета на самолет и путешествий. Покупка других товаров и сервисов через Интернет.

Без форм мы не смогли бы воплотить в жизнь никакие из перечисленных возможностей - и, фактически, сам Интернет, с точки зрения предоставления интерактивных сервисов, никогда бы не стал таким эффективным, каким он является сейчас. В наши дни для выполнения задач, для которых предназначены формы языка HTML, часто используются другие технологии.

Технология Flash, например, поддерживает формы с расширенными возможностями, которые, помимо всего прочего, очень быстро загружаются и их обновление происходит на той же странице без перезагрузки. Однако это не означает, что пользователи потеряли интерес к формам языка HTML: хотя Flash-формы и могут быть очень полезными для некоторых людей, их невозможно сделать такими же доступными для поиска и для людей с ограниченными возможностями, как формы на языке HTML. Поэтому даже сайты, использующие Flash-формы, часто предоставляют альтернативные формы, реализованные на языке HTML. Другие технологии начинают насыщать формы более богатыми возможностями, однако эти технологии пока являются предварительными, поэтому формы на языке HTML остаются традиционным способом добавления интерактивности и функциональности на Web-сайты.

Работать с формами относительно просто, по крайней мере, с точки зрения языка HTML. Чтобы форма функционировала определенным образом, ее необходимо запрограммировать - рассмотрение программирования форм на стороне сервера выходит за рамки данной книги. В этой главе мы рассмотрим, как создавать формы на языке HTML и делать их логичными и доступными. На протяжении всей главы я буду ссылаться на ресурсы, которые помогут лучше познакомиться с возможностями для проверки и обработки построенных форм, предоставляемыми на стороне сервера.

Элемент form

Создание всех форм начинается с элемента form: <form> </form>

45

У элемента form существует два обязательных атрибута, необходимых для функционирования формы:

method - атрибут определяет способ, с помощью которого будет осуществляться связь между формой и Web-сервером. Атрибут может принимать значения get и post;

action - значением атрибута action является корректный адрес скрипта, обрабатывающего данные, введенные на форме, как показано в примере 5.1.

Пример 5.1. Добавление атрибутов method и action, а также соответствующих значений в элемент form <form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

</form>

Квантовый скачок Необходимо проконсультироваться с вашим Интернет-провайдером, чтобы определить предпочтительный метод передачи данных формы

в скрипты, предоставляемые для обработки данных. Более того, многие Интернет-провайдеры предлагают несколько скриптов для обработки данных формы, однако не все скрипты будут соответствовать вашим требованиям.

Если необходимо создать простую форму для связи, трудностей не возникнет. Однако, если это скрипт, реализующий, например, функциональность корзины Интернет-магазина, потребуется дополнительное программирование и настройка. Важно понимать, что не все поставщики услуг позволяют улучшать скрипты, поэтому придется подготовиться заранее, чтобы получить требуемый сервис.

Если загрузить приведенную разметку в браузер, ничего не произойдет. Формы основаны на понятии элементов управления. Элементы управления - это стандартные поля и кнопки, отображаемые в результате разметки HTML-формы.

Добавление поля ввода ПОЛЯ ввода предназначены для выполнения ряда задач, включая ввод имени, адреса и так далее. Для создания поля ввода используется

элемент input с атрибутом type, значение которого устанавливается в text, как показано в примере 5.2. Пример 5.2. Добавление полей ввода

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

Имя: <input type="text" /><br /> Фамилия:<input type="text" /><br /> Телефон:<input type="text" /> </form>

Как показано на рисунке 5.1, использование элемента input с атрибутом type для ввода текста создает знакомый вид формы.

Рис. 5.1. Поля ввода формы с текстом

Конечно, эта форма неаккуратная и непривлекательная. Мы это исправим с помощью языка CSS далее в этой книге, однако до того момента необходимо обсудить несколько технических вопросов. Самый важный из них - как отличить одно поле от другого. Элемент input создает поле ввода, но нам хотелось бы идентифицировать каждое поле формы, а также модифицировать поля формы относительно их внешнего вида и поведения. Для идентификации полей ввода используется комбинация атрибутов name и id и ассоциированных значений. Это гарантирует, что форма будет являться обратно совместимой и позволит идентифицировать конкретные области ввода для применения стилей, скриптов и улучшения доступности. В примере 53 показано, как это работает для предыдущего примера.

Пример 5.3. Идентификация поля ввода при помощи атрибутов name и id <form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

Имя: <input type="text" name="firstname" id="firstname" /><br /> Фамилия:<input type="text" name="lastname" id="lastname" /><br /> Телефон:<input type="text" name="phone" id="phone" /> </form>

Следующий шаг заключается в установке размера поля ввода. Используя атрибут size, можно указать ширину каждого поля. Можно также указать максимальное число вводимых символов при помощи атрибута maxlength, как показано в примере 5.4.

Пример 5.4. Модификация поля ввода атрибутами size и maxlength <form method="get" action="http://www.myserver.com/cgi-bin/ mailscript"> Имя: <input type="text" name="firstname" id="firstname"

size="30" maxlength="40" /><br />

Фамилия:<input type="text" name="lastname" id="lastname" size="25" maxlength="40" /><br />

Телефон:<input type="text" name="phone" id="phone" size="15" maxlength="0" />

</form>

Если значение атрибута maxlength равняется 0, число вводимых символов не ограничено; если указано конкретное целое число, количество вводимых символов будет ограничено данным значением. На рисунке 5.2 показаны поля ввода с измененными размерами, которые шире, чем поля ввода на рисунке 5.1.

Рис. 5.2. Изменение размеров полей ввода и ограничение длины вводимых символов

Другим полем, функционирующим подобно полю ввода, является поле password. Оно работает абсолютно так же во всех аспектах, за исключением того, что введенные символы отображаются в поле с использованием звездочек, как показано на рисунке 5.3.

Пароль:<input type="password" name="password" id="password" size="15" />

Добавление флажков и переключателей

Рис. 5.3. Поле eeodapassword отображает введенные символы в виде звездочек

46

Флажки являются прекрасным способом получения информации от посетителя сайта, позволяя делать выбор из предопределенного набора вариантов. Преимущество флажков заключается в том, что посетители могут выбирать больше одного варианта, и их лучше всего использовать, когда существует возможность выбора нескольких ответов. Для создания флажков используется элемент input с атрибутом type, значение которого устанавливается в checkbox, как показано в примере 5.5.

Пример 5.5. Добавление флажков на форму

<р>Пожалуйста, выберите Ваш любимый вид отдыха:</р> <input type="checkbox" name="reading" id="reading" />Чтение<Ьг />

<input type="checkbox" name="sports" id="sports" />Спорт<Ьг /> <input type="checkbox" name="games id="games" /компьютерные игрькЬг /> <input type="checkbox" name="tv" id="tv" />Телевидение<Ьг /> <input type="checkbox" name="movies" id="movies" />Кинофильмы<Ьг /> <input type="checkbox" name="beer" id="beer" />Наслаждение холодным пивом<Ьг />

<input type="checkbox" name="dogs" id="dogs" />Игры с собаками<Ьг />

<input type="checkbox" name="music" id="music" />Прослушивание музыки<Ьг />

<input type="checkbox" name="friends" id="friends" />Встречи с друзьями и отдых с ними После этого пользователи могут выбирать подходящие варианты, как показано на рисунке 5.4.

Рис. 5.4. Пользователи могут выбирать несколько вариантов из списка флажков

Обратите внимание, что значения атрибутов name и id логически соответствуют ассоциированному варианту, и каждый вариант также содержит атрибут value. Это необходимо для функционирования флажков.

Переключатели похожи на флажки с точки зрения возможностей, предоставляемых ими для выбора вариантов из предопределенного набора. Однако в случае с переключателями, посетитель может выбрать только один вариант, а не один или более. Это достигается указанием одного и того же значения для атрибута name (в данном случае, gender) и использованием атрибута value для идентификации вариантов, как показано в примере 5.6. В переключателях необходимо использовать атрибут value, иначе возможность уникального выбора варианта не будет функционировать.

Пример 5.6. Добавление переключателей на форму

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript"> <п2>Пол:</п2>

<input type="radio" value="female" name="gender" id="female" />Женский<Ъг /> <input type="radio" value="male" name="gender" id="male"

/>Мужской<Ьг />

<input type="radio" value="undisclosed" name="gender" id="Неуказанный" />Предпочли скрыть

</form>

На рисунке 5.5 показан ряд переключателей, определенных в примере 5.6.

Рис. 5.5. Выбор варианта с помощью переключателей

Флажки и переключатели можно использовать в любой комбинации, соответствующей назначению формы. Важно помнить, что флажки можно использовать для выбора нескольких вариантов, а переключатели ограничены выбором только одного варианта.

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

в основном предназначена, например, для спортсменок, можно отобразить флажки или переключатели с заранее выбранными вариантами, используя атрибут checked, как показано в примере 5.7. Заранее выбранный элемент будет отмечен «галочкой» или точкой.

I Пример 5.7. Добавление переключателей на форму

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

<р>Пожалуйста, выберите Ваш любимый вид отдыха:</р>

<input type="checkbox" name="reading" id="reading" />Чтение<Ьг />

<input type="checkbox" name="sports" id="sports" checked="checked" />Спорт<Ьг />

<input type="checkbox" name="games id="games" />Компьютерные игрькЬг /> <р>Пожалуйста, укажите Ваш пол:</р>

<input type="radio" value="female" name="gender" id="female" checked="checked" />Женский<Ьг /> <input type="radio" value="male" name="gender" id="male"

/>Мужской<Ьг />

<input type="radio" value="undisclosed" name="gender" id="Неуказанный" />Предпочитаю не указывать

47

</form>

На рисунке 5.6 показаны заранее выбранные варианты.

Рис. 5.6. Заранее выбранные флажки и переключатель

Использование меню формы Существует два типа меню: открывающееся меню и список. Оба меню чрезвычайно полезны и могут быть видоизменены различными способами для решения многих задач.

Одним из наиболее популярных способов представления вариантов на формах является всем известное открывающееся меню. Меню такого рода особенно полезны, когда существует множество вариантов, и они обычно отображаются в стандартных меню для штатов, стран, ценообразования и так далее.

Открывающиеся меню создаются комбинированием вариантов при помощи элементов select и option, как показано в примере 5.8. Пример 5.8. Открывающееся меню формы

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

<р>Штат (Соединенные штаты. Западный регион):</р>

<select>

<option value="Arizona">Аризона</option> <option value="California">Kaлифopния</option> <option value= "Colorado">KojiopaflO</option> <option value="Nevada">Невада</option> <option value="Texas">Texac</option>

<option value="Utah">Юта</option> </select>

</form>

На рисунке 5.7 показано открывающееся меню.

В открывающееся меню можно добавлять другие возможности, включая заранее выбранные варианты. Как и в случае с атрибутом checked для флажков, предварительный выбор вариантов может способствовать удобному использованию формы, предоставляя более индивидуальный подход. Чтобы заранее выбрать определенный вариант в меню формы, используется атрибут selected:

<option value="Nevada" selected="selected">HeBafla</option>

В данном случае, вариант Nevada будет выбран по умолчанию в открывающемся меню формы, как показано на рисунке 5.8.

Рис. 5.7. Выбор варианта из открывающегося меню формы

Рис. 5.8. Использование атрибута select для определения элемента по умолчанию в открывающемся списке

Можно также создавать список. Список формируется таким же образом, как и открывающееся меню, однако к открывающему тегу select добавляется атрибут size с целочисленным значением, соответствующим количеству вариантов:

<select size="6">

Атрибут selected можно добавить к любому варианту, который должен быть выбран по умолчанию. Дополнительная возможность списка - выбор нескольких вариантов.

Для этого необходимо просто добавить атрибут multiple к открывающему тегу select: <select size="6" multiple="multiple">

48

Теперь меню превратилось в список, позволяя посетителю выбирать несколько вариантов, как показано на рисунке 5.9.

Рис. 5.9. Список с несколькими выбранными вариантами

Использование текстовых областей В некоторых случаях, предпочтительнее использовать область для обратной связи или поле, являющееся более гибким, чем обычное поле

ввода, которое позволяет вводить всего лишь одну строку текста. В таких случаях текстовые области являются отличным решением. Текстовые области создаются с использованием элемента textarea и атрибутов rows и cols, определяющих видимое поле. В отличие от таблиц, строки и столбцы текстовой области определяют ее размеры. Строки определяют количество строк текста, отображаемых в текстовой области, а столбцы определяют ширину области, как показано в примере 5.9.

Пример 5.9. Создание текстовой области

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

<р>Пожалуйста, позвольте узнать, есть ли у Вас какие-либо особенные пожелания:</р>

<textarea rows="10" cols="25"> </textarea>

</form>

Высота результирующей текстовой области будет составлять 10 строк, а ширина - 25 символов, как показано на рисунке 5.10. Я вставила текст в эту область, чтобы вы могли посмотреть, как выглядит текстовая область, когда посетитель вводит в нее текст.

Можно также немного настроить текстовые области при помощи языка HTML. Во-первых, можно добавить атрибут name, который будет предоставлять информацию скрипту, отвечающему за отправку формы, и уточнять назначение текстовой области.

Рис. 5.10. Текстовые области позволяют посетителям легко вводить дополнительные комментарии без ограничений,

присущих полям ввода, флажкам, переключателям или меню

Кроме того, можно добавить атрибут id, если хотите получить возможность присоединения скриптов к текстовой области, как показано в примере 5.10.

Пример 5.10. Текстовая область с атрибутами name и id

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

<р>Пожалуйста, позвольте узнать, есть ли у вас какие-либо особенные пожелания:</р>

<textarea rows="10" cols="25" name="requests" id="requestbox"> </textarea>

</form>

Кроме этого, в качестве небольшой дополнительной настройки текстовой области можно ввести текст в ее разметку:

<textarea rows="10" cols="25" name="requests" id="requestbox">

Введите здесь свои комментарии.

</textarea>

Теперь в текстовой области посетители будут видеть введенный текст. Щелкнув на текстовой области, они смогут удалить текущий текст и ввести собственный, как показано на рисунке 5.11.

49

Рис. 5.11. Текстовая область со вспомогательной информацией для посетителей сайта

Кнопки Reset (Сбросить) и Submit (Отправить)

Элементы управления, выполняющие функции reset и submit, встроены непосредственно в язык HTML, поэтому вам не придется выполнять огромную работу по реализации данных функций. До определенной степени даже можно настроить кнопки, не прибегая к помощи изображений или стиля.

При щелчке на кнопке reset (Сбросить) происходит очистка формы. Кнопка submit (Отправить) отправляет данные формы на сервер для последующей обработки, используя значения атрибутов method и action элемента form.

В примере 5.11 показано, как добавлять на форму кнопки reset (Сбросить) и submit (Отправить). Пример 5.11. Создание кнопок reset (Сбросить) и submit (Отправить)

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript"> <input type="reset" value="reset" /> <input type="submit" value="submit" /> </form>

На рисунке 5.12 показано, как значение атрибута value отображается на кнопках.

Рис. 5.12. Кнопки reset (Сбросить) и submit (Отправить) создаются автоматически

Поскольку значения, отображаемые на кнопках формы, можно модифицировать, можно немного настроить внешний вид кнопок, чтобы их названия говорили сами за себя, как показано на рисунке 5.13.

Рис. 5.13. Настройка кнопок reset (Сбросить) и submit (Отправить)

Использование графической кнопки Submit (Отправить)

ЕСЛИ ВЫ хотите, чтобы внешний вид кнопки сочетался с визуальным дизайном страницы, можно создать изображение и использовать его для процесса отправки данных. Небольшая проблема заключается в том, что этот метод нельзя применить для кнопки reset (Сбросить), поскольку для ее функционирования придется использовать язык JavaScript. Но в языке HTML уже заложена возможность использования нестандартной кнопки для отправки данных формы.

В примере 5.12 была создана графическая кнопка submit (Отправить) для формы и вставлена на форму при помощи элемента input с дополнительными атрибутами для изображения.

Пример 5.12. Использование графической кнопки submit (Отправить)

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

<input type="image" src="submit-button.gif" width="75" neight="25" а]^="Отправить!" value="submit" /> </form>

Обратите внимание, что значением атрибута type является image. Также для кнопки указывается путь к изображению, ее ширина и высота (атрибуты width и height), значение (атрибут value) и альтернативный текст. Помните, что это -изображение, поэтому для него необходимо указать альтернативный текст.

На рисунке 5.14 показана стилизованная графическая кнопка, на которую наведен указатель мыши. Обратите внимание, что указатель мыши принимает вид Руки, как это происходит с любой другой ссылкой, и отображается альтернативный текст.

Рис. 5.14. Реализация графической кнопки submit (Отправить)

Квантовый скачок

В большинстве современных дизайнов Web-страниц изображения используются для кнопок submit (Отправить) в связке с языком CSS. Как вы уже заметили, хотя элементы управления форм, описанные ранее в этой главе, являются эффективными и простыми с точки зрения реализации, их вид оставляет желать лучшего. Мы исправим эту ситуацию, как только займемся применением стилей к элементам формы далее в этой книге.

Обеспечение доступности форм с использованием элемента label

Из-за своей чрезвычайно интерактивной природы, от форм требуется немного больше доступности, чем от других HTML-элементов. По большей части это происходит потому, что все элементы, рассмотренные в этой главе, взаимодействуют с элементами управления формы, которые являются компонентами, встроенными в браузеры и вызываемыми соответствующим кодом на языке HTML.

50