SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Формы в HTML

В этой главе:

  1. Контейнер формы – элемент FORM
  2. Элемент управления INPUT
  3. Элемент BUTTON
  4. Элемент TEXTAREA
  5. Списки выбора – элемент SELECT
  6. Элементы OPTION и OPTGROUP
  7. Элемент LABEL
  8. Элементы FIELDSET и LEGEND
  9. Элемент ISINDEX
  10. Элемент KEYGEN

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

Изначально формы предназначались только для отправки информации, введенной пользователем на обработку сервером с использованием CGI-скриптов, либо иного серверного программного обеспечения, например, PHP, ASP, JSP и т.д. Однако, в последнее время их часто используют совместно с JavaScript, например, для организации и (или) настройки пользовательского интерфейса на динамических страницах Web. Примеры к этой главе находятся в папке Part_2\Forms.

ПРИМЕЧАНИЕ
Для работы с примерами рекомендуется установить на компьютер Web-сервер (например, Apache) с поддержкой CGI-скриптов на языке Perl. См. так же как установить Apache, PHP и MySQL под Windows.

Контейнер формы – элемент FORM

Элемент FORM служит для объединения всех составных частей формы (полей ввода, кнопок, переключателей) в единое целое. При помощи атрибутов этого элемента вы можете задать программу на сервере, которая будет обрабатывать информацию, введенную пользователем в форму, а также способ отправки этой информации.

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

Листинг 2.32. Форма

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Простая форма</title> </head> <body> <form action="http://localhost/cgi-bin/test.cgi" method="get"> <label for="username">Ваше имя</label> <input type="text" name="username" /><br /> <input type="submit" value="Отправить" /> <input type="reset" value="Очистить" /> </form> </body> </html>

Эта форма содержит четыре элемента: строку для ввода текста и подпись для нее, а также две кнопки – для отправки формы и для сброса значений, введенных пользователем. Подпись определена при помощи элемента LABEL, а все остальные ее элементы – при помощи INPUT. Что касается самого контейнера FORM, то здесь он имеет два атрибута: ACTION и METHOD. Это – основные атрибуты для любой формы, первый определяет расположение программы на сервере («скрипта»), которая должна обработать передаваемые формой данные, а второй указывает метод отправки. В качестве значения для ACTION допустимо так же использовать адреса, начинающиеся с mailto: – в таком случае форма будет отправлена при помощи почтового клиента посетителя.

ПРИМЕЧАНИЕ
Следует учитывать, что при отправке почтой символы русского языка отсылаются в специальном формате – “application/x-www-form-urlencoded” – поэтому прежде, чем работать с данными, их надо расшифровать. Так что если вы собираетесь использовать отправку почтой, то установите программу, распознающую подобные форматы, например, SNK Decode.

Что касается методов отправки, то их всего два: GET и POST. Первый подходит для отправки небольших форм, наподобие той, что была приведена в примере выше. При таком способе к адресу, указанному в ACTION просто добавляются параметры в виде пар «имя – значение». Например, для рассмотренной в листинге форме (в случае, если пользователь введет в строку имени «Vasja»), получится строка вида:

http://localhost/cgi-bin/test.cgi?username=Vasja

Если же форма достаточно объемная, то лучше воспользоваться методом POST, при этом набор данных включается в тело формы и высылается целиком. Разумеется, разные методы отправки требуют разных методов обработки данных сервером. Имеющийся на CD пример test.cgi может обрабатывать оба типа передачи данных, а более подробную информацию, касающуюся взаимодействию Web-документов с Web-сервером можно почерпнуть из соответствующих изданий.

Разумеется, список атрибутов элемента FORM не ограничивается этими двумя атрибутами. Так, для взаимодействия с сервером могут использоваться другие вспомогательные атрибуты – ENCTYPE, ACCEPT и ACCEPT-CHARSET. Они предназначены для идентификации типов данных, которые предстоит обработать серверу. Подробнее об этих и остальных атрибутах можно узнать, ознакомившись с таблицей 2.30.

Таблица 2.30 Атрибуты элемента FORM
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
nameОтменен в XHTML 1.1Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
target-Указывает имя окна (фрейма), в котором должен быть открыт документ, который выдаст сервер в ответ на поданный при помощи формы запрос
action-Указывает на обработчик формы. В качестве значения указывают http-URI с адресом программы на сервере, либо mailto-URI, если форма предназначена для отправки почтовой программой клиента
method-Указывает на метод отправки данных из формы. Может принимать значения get (принято по умолчанию) или post
enctype-Указывает тип данных, отправляемых серверу. Значение по умолчанию – «application/x-www-form-urlencoded». Если формой передается файл, то следует использовать «multipart/form-data»
accept-Используется для указания списка типов данных, используемых формой. Значения должны быть перечислены через запятую
accept-charset-Указывает кодовую страницу символов, которая будет использована для обработки текстовых данных, полученной сервером
onsubmit-Определяет событие, происходящее непосредственно перед отправкой формы, например, при нажатии пользователем кнопки отправки (Submit)
onreset-Определяет событие, происходящее во время очистки формы, например, при нажатии пользователем на кнопку очистки (Reset)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Для элемента FORM определены два собственных динамических атрибута – ONSUBMIT и ONRESET. По своей сути они сходны с уже знакомыми нам по BODY атрибутам ONLOAD и ONUNLOAD, с той лишь разницей, что должны реагировать на попытку пользователя отправить или очистить форму. Например, изменим код листинга 2.32 таким образом, чтобы задействовать эти атрибуты:

<form action="http://localhost/cgi-bin/test.cgi" method="get" onsubmit="if (!confirm('Действительно отправить?')) return false;"> ... </form>

Не вдаваясь в подробности написания сценариев, отмечу, что приведенный код заставляет браузер выдать диалог подтверждения в ответ на нажатие пользователем кнопки отправки. В случае если пользователь нажмет OK, форма будет отправлена, в противном случае – нет. Аналогичным образом, можно добавить проверку на очистку формы:

<form action="http://localhost/cgi-bin/test.cgi" method="get" onsubmit="if (!confirm('Действительно отправить?')) return false;" onreset="if (!confirm('Действительно очистить?')) return false;"> ... </form>

Полностью пример такой формы приведен в файле formevents.html. Что касается вопросов практического применения этих атрибутов, то если приведенный пример отлично подходит для ONRESET, то атрибут ONSUBMIT чаще всего используют для предварительной проверки формы на корректность заполнения перед ее отправкой на сервер. Впрочем, к вопросу использования динамических атрибутов мы еще не раз вернемся по ходу этой книги.

Свойства FORM

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элемент управления INPUT

Элемент INPUT предназначен для создания элементов управления формы – от полей ввода и списков до кнопок и изображений. Тип элемента определяется при помощи атрибута TYPE, поэтому элемент INPUT всегда используется совместно с этим атрибутом. Так, если мы сейчас вернемся к листингу 2.32, то сможем насчитать в нем 3 элемента INPUT, каждый своего типа. Всего предусмотрено 10 значений, которые может принимать этот атрибут:

Лучше всего рассмотреть все эти элементы наглядно, для чего обратимся к листингу 2.33 (см. так же файл inputs.html).

Листинг 2.33. Влияние атрибута TYPE на элемент INPUT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Типы элементов управления</title> </head> <body> <form action="http://localhost/cgi-bin/test.cgi"> type="text" <input type="text" name="text1" /><br /> type="password" <input type="password" name="password1" /><br /> type="checkbox" <input type="checkbox" name="checkbox1" /><br /> type="radio" <input type="radio" name="radio1" /><br /> type="file" <input type="file" name="file1" /><br /> type="hidden" <input type="hidden" name="hidden1" /><br /> type="image" <input type="image" name="image1" /><br /> type="button" <input type="button" name="button1" /><br /> type="submit" <input type="submit" name="submit1" /><br /> type="reset" <input type="reset" name="reset1" /><br /> </form> </body> </html>

Определенная здесь форма содержит все 10 разновидностей элементов ввода, доступных для элемента INPUT. Пример отображения этого файла графическим браузером показан на рис. 2.20.

Все разновидности тэга INPUT

Рис. 2.20. Все разновидности INPUT

Здесь сразу следует оговориться, что приведенный в листинге 2.33 код является незавершенным. Так, для типа Image обязательно должен быть определен адрес картинки, что делается при помощи атрибута SRC. А кнопка (Button) получилась пустой из-за того, что мы не указали для нее атрибут VALUE, при помощи которого определяют текст подписи.

ПРИМЕЧАНИЕ
Разные браузеры интерпретируют такие ошибки исходного кода по-разному. Так, Firefox до версии 2.0 выводил вместо отсутствующей картинки фразу «Отправить запрос» (как на рис. 2.20), щелчок по которой приведет к отправке формы, а MSIE, Opera и ранние версии Netscape и новые версии Firefox показывают значок незагруженного изображения. Впрочем, щелчок пользователя по этому значку так же приведет к отправке формы.

Теперь исправим свою оплошность и добавим необходимые атрибуты к этим двум элементам:

... <input type="image" name="image1" src="button.png" /> <input type="button" name="button1" value="Щекай!" /> ...

Если после проведения таких изменений вновь посмотреть этот документ в браузере, то мы увидим, что вместо надписи «отправить запрос» (или значка незагруженного изображения) появится кнопка-картинка, а на пустой доселе кнопке появится надпись «Щелкай!». Впрочем, от щелканья по этой кнопке проку будет мало, поэтому добавим к ней обработчик события для щелчка мышью:

<input type="button" name="button1" value="Щекай!" onclick="alert('Hi!')" />

Теперь при щелчке по этой кнопке будет появляться окно с сообщением, хотя, разумеется, можно определить и любое другое действие, в том числе и отправку или очистку формы. Вообще формы и их элементы чаще всего используются совместно со сценариями – тут можно привести ряд примеров, начиная от различных on-line конвертеров и калькуляторов, и заканчивая целыми приложениями, основанными на web-технологиях. В связи с этим фактором, а так же с тем, что элемент INPUT имеет множество ипостасей, он, пожалуй, является рекордсменом в HTML по числу поддерживаемых атрибутов. Попробуем собрать все их в таблице 2.31.

Таблица 2.31 Атрибуты элемента INPUT
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
nameОтменен в XHTML 1.1Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
typeОбязательный атрибут (кроме типа text)Определяет тип элемента INPUT. Может принимать значения text (по умолчанию), password, checkbox, radio, file, hidden, image, button, submit, reset
valueОбязательный атрибут для типов radio и checkboxОпределяет значение элемента по умолчанию
srcТолько для типа imageУказывает URI изображения
altТолько для типа imageУказывает текст, который должен быть показан на месте изображения, если оно не было загружено
usemapТолько для типа imageУказывает URI клиентской карты рисунка
ismapТолько для типа imageУказывает, что должна быть использована серверная карта рисунка
alignТолько для типа image, устаревшийОпределяет выравнивание относительно окружающего блока текста. Может принимать значения left, right
size-Определяет ширину элемента в символах (для text, password) или пикселях (для остальных)
maxlengthТолько для типов text и passwordУказывает максимально возможную длину строки, которую сможет ввести пользователь в данный элемент формы
checkedТолько для типов radio и checkboxУказывает начальное состояние элемента. Может принимать значения «on» (отмечено) и «off» (не отмечено, принято по умолчанию)
accept-Используется для указания списка типов, допустимых для обработки передаваемых элементом данных. Значения должны быть перечислены через запятую
readonlyТолько для типов text и passwordЗапрещает редактировать содержимое элемента
disabled-Делает элемент неактивным (недоступным для пользователя). При этом он не сможет получить фокус ввода и будет пропущен при навигации табуляцией
tabindex, accesskeyОба атрибута не поддерживается Netscape 4, а accesskey – и OperaОпределяют порядок следования элементов формы (при использовании перехода между ними при помощи клавиатуры) и «горячую клавишу» для быстрого перехода к элементу соответственно
onfocus-Определяет действие, которое должно быть выполнено в случае получения элементом фокуса ввода
onblur-Определяет действие, которое должно быть выполнено в случае потери элементом фокуса ввода
onselectТолько для типов text и passwordОпределяет действие, которое должно быть выполнено в случае выделения текста в элементе
onchangeТолько для типов text, password, radio и checkboxОпределяет событие, которое должно быть выполнено в случае изменения состояния элемента управления (например, после ввода текста пользователем в строку ввода или включения переключателя)
Onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Фактически, мы здесь имеем дело не с одним, а с несколькими различными элементами – отсюда и такое изобилие атрибутов. Например, набор атрибутов для элемента INPUT с типом IMAGE гораздо больше похож на таковой для элемента IMG (рисунок), поэтому рассматривать специфические для этого типа атрибуты мы пока не будем. Ряд других атрибутов, например, CHECKED или READONLY, также могут применяться только для конкретных типов элементов форм.

Практика показывает, что чаще всего элемент INPUT используется с типами текста, пароля и флажка. Ну и, разумеется, практически в каждой форме присутствуют кнопки сброса и отправки. Все эти разновидности элемента INPUT мы и рассмотрим подробнее на примере листинга 2.34.

Листинг 2.34. Форма с текстовой строкой, паролем и флажком

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Типичная форма</title> </head> <body> <form action="http://localhost/cgi-bin/test.cgi" onsubmit="if (Warning.checked) alert('Отправляемся!');"> Логин: <input type="text" name="Login" size="10" /><br /> Пароль: <input type="password" name="Paswd" size="10" /><br /> Вывести предупреждение? <input type="checkbox" name="Warn" value="Alert" checked="checked" /><br /> <input type="submit" value="Отправить" /> <input type="reset" value="Сброс" /> </form> </body> </html>

Здесь в открывающем теге элемента FORM определен адрес программы, которая будет принимать данные на сервере (ACTION), а также задан сценарий, который будет выполняться при отправке формы (ONSUBMIT). В самой форме находятся текстовое поле шириной 10 символов (атрибут SIZE), под ним – поле пароля аналогичного размера, ниже располагается заранее отмеченный флажок (CHECKED), и в самом низу, как обычно, кнопки отправки и очистки. При вводе текста в текстовое поле он будет отображаться как обычно, а в поле пароля он, как водится, будет заменяться звездочками (или точками в случае MSIE для Windows XP). Если отправить такую форму при отмеченном флажке, то благодаря предопределенному сценарию будет появляться сообщение об отправке. Этот пример можно найти на диске в файле typical.html, а дополнительные примеры – в inputattr.html.

Свойства INPUT

Закрывающий тег: только в XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Элемент BUTTON

Мы уже знаем как создавать различные кнопки при помощи элемента INPUT. Однако, начиная с момента принятия HTML 4.0, появилась возможность создания кнопки произвольного вида (например, с рисунком). Для этих целей был определен элемент BUTTON, который, в отличие от INPUT, не является пустым элементом и может содержать в себе практически любые другие элементы HTML (кроме input, select, textarea, label, button, form, fieldset, iframe и isindex – т.е. кроме элементов управления форм).

ПРИМЕЧАНИЕ
Для вкладываемых в BUTTON элементов, помимо запрета на использование элементов форм, имеется еще одно ограничение: если используются рисунки, то они не могут содержать навигационные карты изображения.

В простейшем случае использование BUTTON сводится к тому, что в контейнер помещается текст, который будет отображен в качестве подписи кнопки:

<button type="button">Кнопка</button> Такая запись по своему итоговому результату аналогична INPUT с типом «button» и значением «Кнопка»: <input type="button" value="Кнопка" />

Более того, атрибут TYPE элемента BUTTON может принимать значения Submit и Reset, в таком случае поведение кнопки будет аналогичным тому, что можно получить, используя элемент INPUT с такими же значениями этого атрибута. Разница между элементами наглядно проявляется в тех случаях, когда кнопка должна содержать форматированный текст или даже более сложные элементы, вплоть до рисунков и таблиц (примеры таких кнопок можно посмотреть в файле buttons.html):

<button type="reset"> Щелкните, чтобы <strong>очистить</strong> форму! </button> <button type="button"> <img src="button.png" width="120" height="32" /> </button>

Что касается других атрибутов элемента BUTTON, то их набор аналогичен тому, что определен для INPUT с типами кнопок. Приведем их в таблице 2.32.

Таблица 2.32 Атрибуты элемента BUTTON
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
nameОтменен в XHTML 1.1Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
typeОбязательный атрибутОпределяет тип кнопки. Может принимать значения submit (по умолчанию), reset и button
value-Определяет значение элемента по умолчанию
disabled-Делает элемент неактивным (недоступным для пользователя). При этом он не сможет получить фокус ввода и будет пропущен при навигации табуляцией
tabindex-Определяет порядок следования элементов формы (при использовании перехода между ними при помощи клавиатуры)
accesskey-Определяет «горячую клавишу» для быстрого перехода к элементу
onfocus-Определяет действие, которое должно быть выполнено в случае получения элементом фокуса ввода
onblur-Определяет действие, которое должно быть выполнено в случае потери элементом фокуса ввода
Onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя
Свойства BUTTON

Закрывающий тег: требуется.
Совместимость: кроме Netscape 4.
Вложение: недопустимо.
Уникальный: нет.

Элемент TEXTAREA

Элемент TEXTAREA создает многострочный элемент для ввода текста. В своем роде он, подобно BUTTON, схож с элементом INPUT, только в данном случае – с типом text. И если BUTTON применяют для создания особи изысканных кнопок, то назначение TEXTAREA куда как более приземленное – его используют в тех случаях, когда необходимо дать пользователю возможность ввести достаточно большой объем текста.

Элемент TEXTAREA имеет два обязательных атрибута – COLS и ROWS, которые задают, соответственно, ширину и высоту текстового окна:

<textarea name="Description" cols="40" rows="5"></textarea>

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

<textarea name="Description" cols="40" rows="5"> Текст по умолчанию </textarea>

ПРИМЕЧАНИЕ
Следует отметить, что вложенный таким образом в TEXTAREA текст будет выведен предварительно отформатированным, подобно тому, это происходит с содержимым контейнера PRE.

Помимо COLS и ROWS, для TEXTAREA определены другие атрибуты. Все они перечислены в таблице 2.33.

Таблица 2.33 Атрибуты элемента TEXTAREA
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
nameОтменен в XHTML 1.1Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
cols, rowsОбязательные атрибутыОпределяют размер текстовой области по ширине (в символах) и высоте (в строках) соответственно
disabled-Делает элемент неактивным (недоступным для пользователя). При этом он не сможет получить фокус ввода и будет пропущен при навигации табуляцией
tabindex-Определяет порядок следования элементов формы (при использовании перехода между ними при помощи клавиатуры)
onfocus-Определяет действие, которое должно быть выполнено в случае получения элементом фокуса ввода
onblur-Определяет действие, которое должно быть выполнено в случае потери элементом фокуса ввода
onselect-Определяет действие, которое должно быть выполнено в случае выделения текста
onchange-Определяет событие, которое должно быть выполнено в случае изменения текста
wrapНестандартный, поддерж. всеми Определяет режим переноса строк, не помещающихся по ширине поля. Допустимые значения: off, hard (MSIE, Opera) или soft (Netscape, Mozilla)
Onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Как видно из таблицы, состав атрибутов сходен с теми, что имеются у текстового варианта INPUT. Единственное исключение – фирменный атрибут WRAP, введенный в Netscape 3 и ныне поддерживаемый всеми браузерами. Он определяет режим переноса строк: при hard и soft строки переносятся, а при значении off – нет. При этом Mozilla всегда использует мягкий перенос (т.е. не умещающиеся в одну строку слова не обрываются), а MSIE и Opera – жесткий (когда не умещающиеся слова переносятся побуквенно). Так или иначе, но в действительных элементах HTML этого атрибута быть не должно – как обычно, следует использовать CSS:

<textarea name="description" style="white-space: nowrap" cols="40" rows="5"> Этот текст не будет перенесен на следующую строку! </textarea>
Свойства TEXTAREA

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо, TEXTAREA не должен содержать в себе никаких других элементов.
Уникальный: нет.

Списки выбора – элемент SELECT

Для того чтобы дать пользователю возможность выбора какого-либо варианта ответа, можно использовать группы флажков или радиокнопок. Однако, если вариантов выбора много, или просто требуется сделать форму более компактной, используют списки выбора. Для создания таких списков в HTML используют элемент SELECT, а также OPTION и OPTGROUP.

Внешне элемент SELECT может быть представлен либо как обычный, либо как раскрывающийся (ниспадающий) список, в зависимости от того, указан или нет атрибут SIZE:

<select name="Selection1"> ... </select> <select name="Selection2" size="5"> ... </select>

В первой строке описывается ниспадающий список, а во второй – обычный список высотой в пять строк. Если размер второго списка будет более пяти элементов, то браузер создаст полосу вертикальной прокрутки, чтобы пользователь смог увидеть их все (Mozilla-браузеры выводят полосу прокрутки в любом случае). Если же элементов окажется меньше, то размер списка все равно будет таким, какой указан в SIZE, а вместо недостающих элементов будут пустые строки (рис. 2.21).

Вид списка SELECT в зависимости от значения атрибута SIZE

Рис. 2.21. Вид списка в зависимости от значения атрибута SIZE

Помимо SIZE, элемент SELECT имеет еще один собственный атрибут, который так же может влиять на вид списка – MILTIPLE. Если указан этот атрибут, то становится возможным выбрать из списка сразу несколько элементов. При этом если атрибут SIZE не указан, то размер списка выбирается браузером автоматически (что, в общем-то, не есть хорошо, поскольку делает вид страницы непредсказуемым). Если же значение атрибута SIZE было 1, то вместо ниспадающего списка будет построен обычный, высотой в одну строку (что, разумеется, тоже вряд ли приемлемо с точки зрения удобства посетителя). Что касается остальных атрибутов элемента SELECT, то все они перечислены в таблице 2.34.

Таблица 2.34 Атрибуты элемента SELECT
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
nameОтменен в XHTML 1.1Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
size-Определяет размер списка в высоту
multiple-Если указан, то из списка будет возможно выбрать более одного элемента
disabled-Делает элемент неактивным (недоступным для пользователя). При этом он не сможет получить фокус ввода и будет пропущен при навигации табуляцией
tabindex-Определяет порядок следования элементов формы (при использовании перехода между ними при помощи клавиатуры)
onfocus-Определяет действие, которое должно быть выполнено в случае получения элементом фокуса ввода
onblur-Определяет действие, которое должно быть выполнено в случае потери элементом фокуса ввода
onchange-Определяет событие, которое должно быть выполнено в случае изменения выбранного элемента списка
Onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя
Свойства SELECT

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элементы OPTION и OPTGROUP

Каждый элемент SELECT должен содержать хотя бы один элемент OPTION. С помощью OPTION создаются строки (или элементы) списков:

<select name="Systems"> <option>Windows</option> <option>Mac OS</option> <option>Linux</option> </select>

Здесь создается список из трех строк. При этом изначально выбранным будет первый элемент (в данном случае – содержащий строку Windows). Чтобы изначально выбранным был другой вариант, например, Linux, или же если используется обычный, а не ниспадающий список (в обычных списках изначально нет выбранного элемента), используют атрибут SELECTED:

<option selected="selected">Linux</option>

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

Листинг 2.35. Форма со списком и группами

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Список и группировка</title> </head> <body> <form action="http://localhost/cgi-bin/test.cgi"> <select name="Systems"> <optgroup label="Windows"> <option>Windows 98</option> <option>Windows 2000</option> <option>Windows XP</option> </optgroup> <optgroup label="Mac OS"> <option>Mac OS 8</option> <option>Mac OS 9</option> <option>Mac OS X</option> </optgroup> <optgroup label="Linux"> <option>Linux 2.2</option> <option>Linux 2.4</option> <option>Linux 2.6</option> </optgroup> </select> </form> </body> </html>

Поскольку сам элемент OPTGROUP не может содержать ничего, кроме элементов OPTION, то для его визуального представления используют атрибут LABEL. Содержимое этого атрибута выводится в качестве заголовка группы (рис. 2.22).

Список с группами OPTGROUP

Рис. 2.22. Список с группами

Атрибут LABEL определен и для элемента OPTION: согласно правилам HTML 4.0, если определен такой атрибут, то вместо содержимого контейнера OPTION в списке должно использоваться значение атрибута LABEL. Однако ни один из известных мне браузеров такого не делает. В то же время, у OPTION имеется еще один атрибут – VALUE, содержимое которого используется всеми браузерами. Дело в том, что при отправке формы серверу в качестве значения SELECT пересылается выбранная строка, т.е. содержимое выбранного элемента OPTION. Но если этот элемент Option будет содержать атрибут VALUE, то серверу будет передано именно его значение.

СОВЕТ
Если вы последовали совету установить web-сервер на свой ПК и настроили поддержку скриптов, то поэкспериментируйте с примером из листинга 2.35 (файл optgroup.html), добавляя атрибуты VALUE с разными значениями и отсылая форму: обрабатывающий ее скрипт test.cgi будет показывать принимаемые web-сервером значения.

В завершение ознакомления со списками форм остается лишь перечислить атрибуты, поддерживаемые элементами OPTION и OPTGROUP (таблица 2.35).

Таблица 2.35 Атрибуты элементов OPTION и OPTGROUP
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
labelПоддерживается только для OPTGROUPМетка элемента. При использовании с элементом OPTGROUP определяет отображаемый заголовок группы
valueТолько для OPTIONОпределяет значение элемента для отправки на сервер
selectedТолько для OPTIONНазначает элемент выбранным по умолчанию
disabledКроме MSIEДелает элемент или группу элементов недоступными для выбора пользователем
Onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя
Свойства OPTION и OPTGROUP

Закрывающий тег: OPTION – опционально в HTML, требуется в XHTML, OPTGROUP – требуется.
Совместимость: OPTION – все, OPTGROUP – все.
Вложение: OPTION – недопустимо, OPTGROUP – не поддерживается.
Уникальный: нет.

Элемент LABEL

Для привязки текстовой информации к какому-либо определенному элементу управления используют элемент LABEL. При этом каждый элемент LABEL может использоваться только для одного элемента формы, который, в свою очередь, определяется при помощи значения атрибута FOR:

<label for="username">Ваше имя?</label> <input type="text" name="username" />

Здесь создается поле для ввода текста и метка «Ваше имя?» для него. Другой способ связать метку с элементом управления – использование вложения нужного элемента в контейнер LABEL:

<label>Ваше имя? <input type="text" name="username" /> </label>

Помимо атрибута FOR, элемент LABEL имеет еще один атрибут – ACCESSKEY, который, как мы уже знаем, определяет горячую клавишу. При «срабатывании» такой клавиши ассоциированный с меткой элемент управления должен получить фокус ввода:

<label accesskey="N">Ваше имя? <input type="text" name="username" /> </label>

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

<label>Ваше имя? <input type="text" name="username" accesskey="N" /> </label>

По большому счету, такое использование элемента LABEL является неоправданным. В то же время, метки могут пригодиться, если требуется выделить подписи в формах каким-то оформлением (разумеется, с использованием CSS).

Остальные атрибуты LABEL характерны для всех элементов форм – это стандартные id, class, lang, dir, title, style, а так же набор динамических атрибутов, включая onfocus и onblur.

Свойства LABEL

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элементы FIELDSET и LEGEND

Элемент FIELDSET служит для связывания элементов формы в группы, а LEGEND – для создания подписи к такой группе. При этом группа, вложенная в FIELDSET, будет заключена браузером в рамку.

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

Листинг 2.36. Группы и радиокнопки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Предпочтения в напитках</title> </head> <body> <form name="Drinks" action="http://localhost/cgi-bin/test.cgi"> <fieldset style="width: 45%; float: left;"> <legend>Ваш любимый горячий напиток</legend> <input type="radio" name="HotDrink" value="Tea" /> Чай<br /> <input type="radio" name="HotDrink" value="Coffee" /> Кофе<br /> <input type="radio" name="HotDrink" value="Cacao" /> Какао<br /> </fieldset> <fieldset style="width: 45%; clear: right;"> <legend>Ваш любимый прохладительный напиток</legend> <input type="radio" name="ColdDrink" value="Juice" /> Сок<br /> <input type="radio" name="ColdDrink" value="Kvas" /> Квас<br /> <input type="radio" name="ColdDrink" value="Lemonade" /> Лемонад<br /> </fieldset> <input type="Submit" value="Отправка" /> <input type="Reset" value="Сброс" /> </form> </body> </html>

Здесь определена форма, состоящая из двух групп переключателей, первая – для выбора горячих напитков, вторая – прохладительных. Каждая группа состоит из трех вариантов ответа, определенных с использованием элементов INPUT и визуально объединена при помощи FIELDSET.

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

Элементы INPUT с именем HotDrink будут связаны в общую группу, объединенную рамкой. То же самое происходит с элементами, названными ColdDrink. В качестве заголовков объединяющих группы рамок используется текст, помещенный в LEGEND (рис. 2.23).

Форма с двумя группами элементов

Рис. 2.23. Форма с двумя группами элементов

Оба рассматриваемых элемента имеют стандартный для форм набор атрибутов. Кроме того, для LEGEND определен еще один атрибут – ALIGN, отвечающий за позиционирование заголовка (таблица 2.36).

Таблица 2.36 Атрибуты элементов FIELDSET и LEGEND
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
alignТолько для LEGEND, устаревшийОпределяет выравнивание подписи группы. Может принимать значения left, right, top, bottom. При этом Mozilla и MSIE поддерживают только первые два значения, а Opera – ни одного
accesskeyНе поддерживаетсяДелает элемент или группу элементов недоступными для выбора пользователем
Onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupMSIE переназначает атрибуты, указанные для FIELDSET, непосредственно заголовку LEGENDОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя
Свойства FIELDSET и LEGEND

Закрывающий тег: требуется.
Совместимость: все.
Вложение: FILEDSET – допустимо, LEGEND – недопустимо.
Уникальный: нет.

Элемент ISINDEX

Еще один элемент, о котором можно упомянуть в контексте форм – это ISINDEX. Данный элемент стоит несколько особняком, поскольку он сам по себе является мини-формой: сам по себе он создает текстовое поле ввода, а атрибут PROMPT определяет текст подписи (метку). При этом подразумевается еще и кнопка отправки, отсутствующая явно, но, тем не менее, срабатывающая при нажатии на клавишу ввода на клавиатуре. В типичном случае форма из ISINDEX получается всегда одинаковая, да и определяется она очень просто:

<isindex prompt="Введите слово для поиска: ">

Поскольку ISINDEX при всей кажущейся простоте лишен какой-либо гибкости, он был исключен из строгой (Strict) версии HTML 4.0, и оставлен лишь в переходной. Соответственно, не следует использовать этот элемент в создаваемых документах – на то есть другие элементы форм. Так что предыдущую строку с ISINDEX можно определить так:

<form> Введите слово для поиска: <input type="text" /> <input type="submit" value="Отправить" /> </form>

Закрывающий тег: опционально в HTML.
Совместимость: все (но не может применяться в HTML 4.0 Strict и выше).
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Элемент KEYGEN

Элемент KEYGEN применяется для отправки зашифрованной пары «подпись-ключ» на сервер, при этом используется технология открытого ключа. Этот элемент может применяться в тех случаях, когда требуется поддержка режима повышенной безопасности. На практике это означает, что при отправке формы у пользователя будет запрашиваться пароль, который, в свою очередь, будет передан серверу в зашифрованном виде. Сам же элемент KEYGEN отображается браузерами Mozilla и Opera как ниспадающий список из нескольких предлагаемых вариантов шифрования:

<keygen name="KeyName" />

Для данного элемента определен стандартный для форм атрибут NAME, а также собственный атрибут CHALLENGE, значение которого шифруется при помощи открытого ключа, возвращенного сервером после формирования персонального ключа.

Свойства KEYGEN

Закрывающий тег: нет.
Совместимость: Netscape, Opera, Mozilla.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

2011-06-03 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru