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

 

Стандартные элементы управления

Стандартными являются все элементы управления, которые можно поместить на HTML‑форму. Просто нужно как‑то объединить и назвать элементы управления, которые используются чаще всего: однострочное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки (как пользовательские, так и выполняющие стандартные действия), поля имен файлов. Все упомянутые элементы управления отображаются браузером Internet Explorer так, как показано на рис. 9.2.

Рис. 9.2. Стандартные элементы управления

Для обозначения всех этих элементов управления используется один HTML‑элемент – INPUT. Элемент задается одиночным тегом и имеет следующие атрибуты:

• type – принимает строку, задающую тип элемента управления (по умолчанию используется строка text, и создается, соответственно, поле для ввода текста), возможные значения и специфика работы соответствующих элементов управления рассмотрены далее;

• name – используется для задания имени элементу управления (строка, которая, помимо идентификации элемента управления, добавляется в данные, отсылаемые серверу);

• value – начальное значение для полей ввода текста и полей для указания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;

• checked – булев атрибут, если он установлен, то флажок или переключатель считается (и отображается браузером) установленным (см. рис. 9.1);

• disabled – булев атрибут, установка которого не позволяет пользователю работать с элементом управления;

• readonly – булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);

• size – задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);

• maxlenth – задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);

• src – для элемента управления image задает расположение используемого изображения;

• title – описание элемента управления (может отображаться браузерами как всплывающая подсказка);

• align – задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML‑элемента, поддерживающего этот атрибут;

• tabindex – номер элемента управления при навигации при помощи табуляции;

• accesskey – горячая клавиша для элемента управления (для перехода к элементу управления нужно нажать Alt и заданную клавишу).

После того как дано начальное описание элемента INPUT, можно проанализировать текст HTML‑документа с формой, показанной на рис. 9.2 (пример 9.1).

Пример 9.1. Пример использования HTML-элемента INPUT

<TITLE>Типы элементов управления INPUT</TITLE>

<FORM action="..." method="post" enctype = "multipart/form-data">

Текстовое поле <INPUT type="text" name="type_text"><BR>

Поле для ввода пароля: <INPUT type="password" name="type_password"

alt = "asfdsvdf"><BR>

Флажок: <INPUT type="checkbox" name="type_check" value = "chk1"

checked><BR>

Два переключателя: <INPUT type="radio" name="type_radio" value="1"

checked>

Рё <INPUT type="radio" name="type_radio" value="2"><BR>

Поле с именами файлов: <INPUT type = "file" name = "type_file"><BR>

<INPUT type = "submit" value = "Отправка данных"><BR>

Щелчок на этом изображении также приведет к отправке данных:

<INPUT type = "image" src = "submit.gif""><BR>

<INPUT type = "reset" value = "Сброс значений полей"><BR>

<INPUT type = "button" value = "Пользовательская кнопка">

</FORM>

В приведенном примере использованы все возможные значения атрибута type, кроме значения hidden. Поскольку использование каждого из значений атрибута type налагает различные ограничения на использование других атрибутов HTML‑элемента INPUT, то целесообразно рассмотреть влияние каждого значения подробно. Для краткости особенности использования каждого значения сведены в таблицу (табл. 9.1).

Таблица 9.1. Значения атрибута type

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

 

Многострочное текстовое поле

Теперь рассмотрим, как вставить в форму более продвинутый элемент управления для редактирования текста – многострочное текстовое поле. Этот элемент управления обозначается HTML‑элементом TEXTAREA и задается парными тегами и .

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

При отображении в текстовом поле форматирование текста сохраняется точно так же, как при использовании HTML‑элемента PRE.

В целом для настройки элемента TEXTAREA используются те же атрибуты, что и для настройки элемента INPUT со значением атрибута type, равным text или password. Однако размер элемента управления задается не атрибутом size, а с помощью следующих атрибутов:

• rows – задает количество строк, которые отображаются без необходимости вертикальной прокрутки;

• cols – задает максимальное количество символов в строке текстового поля, отображаемое без переноса.

Многострочное текстовое поле выглядит так, как показано на рис. 9.3 (в браузере Internet Explorer).

Рис. 9.3. Многострочное текстовое поле

Для создания приведенного на рисунке текстового поля использовался следующий фрагмент кода (пример 9.2).

Пример 9.2. Создание многострочного текстового поля

<TEXTAREA name = В«txtTextВ» rows = 10 cols = 40>

Первый перевод строки не учитывается

Все последующие переводы строки учитываются

Учитываются также отступы от начала строки

Можно использовать зарезервированные символы HTML, типа <>& и прочие

</TEXTAREA>

 

РЎРЅРѕРІР° РєРЅРѕРїРєРё

В HTML предусмотрен отдельный элемент BUTTON на случай, если разработчику формы не хватит возможностей обычных командных кнопок. При помощи этого HTML‑элемента создаются кнопки, на которые можно поместить практически все, за исключением разве что других форм, фреймов и некоторых других особых HTML‑элементов. Такая кнопка выглядит в браузере Internet Explorer так, как показано на рис. 9.4.

Рис. 9.4. Кнопка с расширенными возможностями

Новый вид кнопок используется аналогично кнопкам, создаваемым HTML‑элементом INPUT со значением атрибута type, равным button. Новые кнопки отличаются от своего аналога, прежде всего, созданием: для задания HTML‑элемента BUTTON используются парные теги и , между которыми помещается форматированный текст. Так, за создание кнопки, показанной на рис. 9.4, отвечает следующий HTML‑код (пример 9.3).

Пример 9.3. Создание кнопки BUTTON

<BUTTON name = В«cmbSomeButttonВ» type = В«buttonВ»>

<BR>

На этом виде кнопок может быть помещен любой<BR>

HTML-текст c использованием <STRONG>разметки</STRONG><BR>

Даже таблицы, не говоря уже об изображениях:

<TABLE border = 1>

<CAPTION>Таблица</CAPTION>

<TR><TD>1<TD>2

<TR><TD>3<TD>4

</TABLE>

<BR>

</BUTTON>

Внимание!

В тексте между тегами <BUTTON> и </BUTTON> правильного HTML-документа не должны задаваться другие HTML-элементы, обладающие возможностями гиперссылок. В лучшем случае, если браузер это предусматривает, то такие HTML-элементы будут просто игнорироваться. В худшем же случае, если браузер не переносит HTML-документ с ошибками, то его поведение вообще сложно предугадать.

Специфичным в настройке кнопки, создаваемой HTML‑элементом BUTTON, является использование атрибута type для задания типа кнопки: submit (отправка формы при нажатии), reset (сброс значений элементов управления формы при нажатии) или button (пользовательская кнопка, связываемая со сценарием). Кроме того, доступны атрибуты name, title, disabled, tabindex и accesskey, использование которых полностью аналогично использованию атрибутов элемента INPUT.

Следует особо рассмотреть атрибут value. Его использование только для подписи кнопки становится бессмысленным. Однако в спецификации HTML 4.01 говорится, что предполагается отправка значения этого атрибута вместе с прочими данными формы (видимо при нажатии соответствующей кнопки, имеющей значение атрибута type, равное submit, тогда задание значения атрибута value является весьма полезным для определения на сервере того, какую именно кнопку нажал пользователь).

 

Меню

При создании форм можно использовать еще один достаточно удобный элемент управления, позволяющий выбрать одну или несколько альтернатив из списка – меню (или список параметров). Этот элемент управления добавляется на форму использованием трех HTML‑элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них.

Начнем с HTML‑элемента SELECT – он является контейнером пунктов меню, задается при помощи парных тегов и и поддерживает следующие атрибуты:

• name – имя меню, которое также используется как название параметра при отправке формы;

• size – задает количество строк, одновременно видимых пользователем;

• multiple – булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно;

• disabled – булев атрибут, деактивирует меню;

• title – текст подсказки для меню;

• tabindex – номер при перемещении между элементами управления при помощи табуляции.

Элемент управления меню может представляться различными браузерами по‑разному: в виде списка, в виде раскрывающегося списка, в виде раскрывающегося меню, наконец. Рассмотрим представление меню браузером Internet Explorer. В зависимости от значения атрибута size меню может выглядеть так, как показано на рис. 9.5.

Рис. 9.5. Внешний вид меню

Если использовать атрибут multiple, то Internet Explorer покажет меню простым списком даже при значении size равном 1: в раскрывающемся списке несколько пунктов сразу выбрать нельзя.

Ниже приведен фрагмент текста HTML‑документа, создающий два меню, показанных на рис. 9.5 (согласитесь, что задание меню сходно с заданием списков) (пример 9.4).

Пример 9.4. Два простых меню

size = 1

<SELECT name = "menu1">

<OPTION value = "1.2">РџСѓРЅРєС‚ 1

<OPTION value = "1.2">РџСѓРЅРєС‚ 2

<OPTION value = "1.3">РџСѓРЅРєС‚ 3

<OPTION value = "1.4">РџСѓРЅРєС‚ 4

<OPTION value = "1.5">РџСѓРЅРєС‚ 5

<OPTION value = "1.6">РџСѓРЅРєС‚ 6

</SELECT>

size = 4

<SELECT name = "menu2" size = "4">

<OPTION value = "2.1">РџСѓРЅРєС‚ 1

<OPTION value = "2.2">РџСѓРЅРєС‚ 2

<OPTION value = "2.3">РџСѓРЅРєС‚ 3

<OPTION value = "2.4">РџСѓРЅРєС‚ 4

<OPTION value = "2.5">РџСѓРЅРєС‚ 5

<OPTION value = "2.6">РџСѓРЅРєС‚ 6

</SELECT>

В тексте примера вы видите также упомянутый ранее HTML‑элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами и (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты:

• value – текст, который будет отправлен с формой при выборе пункта меню;

• selected – булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одно меню, если не установлен атрибут multiple);

• disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут).

Теперь осталось рассмотреть, для чего нужен третий HTML‑элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML‑элементов OPTION, определяющих пункты меню одной группы, в парные теги и . Параметры группы можно настроить с использованием следующих атрибутов HTML‑элемента OPTGROUP:

• label – строка с подписью для группы;

• disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION).

Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5).

Пример 9.5. Группировка пунктов меню

size = 1

<SELECT name = "menu1">

<OPTGROUP label = "Группа1">

<OPTION value = "1.1.1">РџСѓРЅРєС‚ 1.1

<OPTION value = "1.1.2">РџСѓРЅРєС‚ 1.2

<OPTION value = "1.1.3">РџСѓРЅРєС‚ 1.3

</OPTGROUP>

<OPTGROUP label = "Группа2">

<OPTION value = "1.2.1">РџСѓРЅРєС‚ 2.1

<OPTION value = "1.2.2">РџСѓРЅРєС‚ 2.2

<OPTION value = "1.2.3">РџСѓРЅРєС‚ 2.3

</OPTGROUP>

</SELECT>

size = 4

<SELECT name = "menu2" size = "4">

<OPTGROUP label = "Группа1">

<OPTION value = "2.1.1">РџСѓРЅРєС‚ 1.1

<OPTION value = "2.1.2">РџСѓРЅРєС‚ 1.2

<OPTION value = "2.1.3">РџСѓРЅРєС‚ 1.3

</OPTGROUP>

<OPTGROUP label = "Группа2">

<OPTION value = "2.2.1">РџСѓРЅРєС‚ 2.1

<OPTION value = "2.2.2">РџСѓРЅРєС‚ 2.2

<OPTION value = "2.2.3">РџСѓРЅРєС‚ 2.3

</OPTGROUP>

</SELECT>

Меню, описанные в примере 9.5, выглядят так, как показано на рис. 9.6.

Рис. 9.6. Внешний вид меню с группированными пунктами

 

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

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

Существует еще один способ задания подписей к элементам управления – использование HTML‑элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML‑документа.

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

При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом:

<LABEL for = «pass»>Введите пароль:</LABEL>

<INPUT type = "password" name = "user_pass" id = "pass">

В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так:

<LABEL>

Введите пароль: <INPUT type = "password" name = "user_pass">

</LABEL>

Текст может находиться до или после определения элемента управления. В теле HTML‑элемента LABEL в этом случае должно быть только одно определение элемента управления.