Элементы select, optgroup и option

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов элемента SELECT

name = cdata [CI]

Определяет имя управляющего элемента.

size = number [CN]

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

multiple [CI]

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

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

Элемент OPTGROUP element позволяет авторам логически группировать варианты. Обычно это полезно, если пользователь должен делать выбор в длинном списке вариантов; группы связанных вариантов проще просматривать и запоминать, чем один длинный список вариантов. В HTML 4.0 все элементы OPTGROUP должны задаваться непосредственно в элементе SELECT (т.е. группы не могут быть вложенными).

17.6.1 Заранее выбранные варианты

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

• Если ни для одного элемента OPTION не установлен атрибут selected, ни один вариант заранее не выбран.
• Если для одного элемента OPTION установлен атрибут selected, этот вариант должен быть выбран зарнее.
• Если для элемента SELECT установлен атрибут multiple, и для нескольких элементов OPTION установлен атрибут selected, они должны быть выбраны заранее.
• Считается ошибкой, если для нескольких элементов OPTION установлен атрибуто selected, а для элемента SELECT не установлен атрибут multiple. Агенты пользователей могут по-разному обрабатывать эту ошибку, но не должны заранее выбирать более одного варианта.

OPTGROUP - - (OPTION)+ -- группа вариантов -->

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов элемента OPTGROUP

label = text [CS]

Метка группы вариантов.

Атрибуты, определяемые в другом месте

Примечание. Разработчикам рекомендуется иметь в виду, что в будущих версиях HTML механизм группировки может быть расширен для подержки вложенных групп (т.е. элементы OPTGROUP смогут быть вложенными). Это позволит авторам представлять более сложную иерархию вариантов.

При представлении пункта меню агенты пользователей должны использовать значение атрибута label элемента OPTION в качестве выбора. Если этот атрибут не определен, агенты пользователей должны использовать содержимое элемента OPTION.

Атрибут label элемента OPTGROUP определяет метку группы вариантов.

В этом примере мы создадим меню, позволяющее пользователю выбрать, какую из семи программ установить. Первая и вторая программы выбраны заранее, но пользователь может отменить их выбор. Остальные программы заранее не выбраны. Атрибут size определяет, что меню должно занимать 4 строки, хотя пользователь и имеет 7 вариантов. Доступ к другим вариантам должен обеспечиваться с помощью механизма прокрутки.

За элементом SELECT следуют кнопки отправки и сброса.

<FORM action="http://somesite.com/prog/component-select" method="post"> <P> <SELECT multiple size="4" name="component-select"> <OPTION selected value="Component_1_a">Программа_1</OPTION> <OPTION selected value="Component_1_b">Программа _2</OPTION> <OPTION>Программа _3</OPTION> <OPTION>Программа _4</OPTION> <OPTION>Программа _5</OPTION> <OPTION>Программа _6</OPTION> <OPTION>Программа _7</OPTION> </SELECT> <INPUT type="submit" value="Отправить"><INPUT type="reset"> </P></FORM>

Успешными будут только выбранные варианты (с использованием имени управляющего элемента "component-select"). Обратите внимание, что, если установлено значение атрибута value, оно определяет исходное значение управляющего элемента, в противном случае это будет содержимое элемента.

В этом примере мы используем элемент OPTGROUP для группировки вариантов. Следующая разметка:

<FORM action="http://somesite.com/prog/someprog" method="post"> <P> <SELECT name="ComOS"> <OPTGROUP label="PortMaster 3">  <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 и ComOS 3.7.1  <OPTION label="3.7" value="pm3_3.7">PortMaster 3 и ComOS 3.7  <OPTION label="3.5" value="pm3_3.5">PortMaster 3 и ComOS 3.5 </OPTGROUP> <OPTGROUP label="PortMaster 2">  <OPTION label="3.7" value="pm2_3.7">PortMaster 2 и ComOS 3.7  <OPTION label="3.5" value="pm2_3.5">PortMaster 2 и ComOS 3.5 </OPTGROUP> <OPTGROUP label="IRX">  <OPTION label="3.7R" value="IRX_3.7R">IRX и ComOS 3.7R  <OPTION label="3.5R" value="IRX_3.5R">IRX и ComOS 3.5R </OPTGROUP> </SELECT></FORM>

представляет следующую группировку:

PortMaster 3 3.7.1 3.7 3.5 PortMaster 2 3.7 3.5 IRX 3.7R 3.5R

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

Графические агенты пользователей могут представлять это следующим образом:

Здесь показан элемент SELECT, представленный в виде каскадных меню. В вершине меню представлено выбранное в настоящий момент значение (PortMaster 3, 3.7.1). У пользователя имеется unfurled два каскадных меню, но он еще не выбрал новое значение (PortMaster 2, 3.7). Обратите внимание, что в каждом каскадном меню отображается метка элемента OPTGROUP или OPTION.

Элемент TEXTAREA

-- текстовое поле из нескольких строк -

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

name = cdata [CI]

Имя управляющего элемента.

rows = number [CN]

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

cols = number [CN]

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

Атрибуты, определяемые в другом месте

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

В этом примере создается управляющий элемент TEXTAREA в 20 строк и 80 столбцов, в котором изначально имеется две строки текста. За элементом TEXTAREA следуют кнопки отправки и сброса.

<FORM action="http://somesite.com/prog/text-read" method="post"> <P> <TEXTAREA name="thetext" rows="20" cols="80"> Первая строка исходного текста. Вторая строка исходного текста. </TEXTAREA> <INPUT type="submit" value="Отправить"><INPUT type="reset"> </P></FORM>

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

 Метки

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

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

Элемент LABEL используется для задания меток для управляющих элементов, не имеющих неявных меток.

Элемент LABEL

<!ELEMENT LABEL - - (%inline;)* -(LABEL) - текст метки поля формы --><!ATTLIST LABEL %attrs;                         -- %coreattrs, %i18n, %events -- for    IDREF     #IMPLIED -- совпадает со значением ID поля -- accesskey %Character; #IMPLIED -- клавиша доступа -- onfocus %Script;  #IMPLIED -- фокус перешел к элементу -- onblur %Script;  #IMPLIED -- фокус переведен на другой элемент -- >

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

for = idref [CS]

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

Атрибуты, определяемые в другом месте

• id, class (идентификаторы в пределах документа)
• lang (информация о языке), dir (направление текста)
• title (заголовок элемента)
• style (встроенная информация о стиле)
• accesskey (клавиши доступа)
• tabindex (переход по клавише tab)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент LABEL может использоваться для прикрепления к управляющим элементам информации. Каждый элемент LABEL связан ровно с одним управляющим элементом формы.

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

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

<FORM action="..." method="post"><TABLE> <TR> <TD><LABEL for="fname">Имя</LABEL> <TD><INPUT type="text" name="firstname" id="fname">  <TR> <TD><LABEL for="lname">Фамилия</LABEL> <TD><INPUT type="text" name="lastname" id="lname"></TABLE></FORM>

Здесь мы расширим предыдущий пример и включим элементы LABEL.

 <FORM action="http://somesite.com/prog/adduser" method="post"> <P> <LABEL for="firstname">Имя: </LABEL>         <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Фамилия: </LABEL>         <INPUT type="text" id="lastname"><BR> <LABEL for="email">email: </LABEL>         <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="Мужской"> Male<BR> <INPUT type="radio" name="sex" value="Женский"> Female<BR> <INPUT type="submit" value="Отправить"> <INPUT type="reset"> </P> </FORM>

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

В этом примере мы неявно связываем две метки с двумя управляющими элементами для ввода текста:

<FORM action="..." method="post"><P><LABEL> Имя <INPUT type="text" name="firstname"></LABEL><LABEL> <INPUT type="text" name="lastname"> Фамилия</LABEL></P></FORM>

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

Если на элемент LABEL переходит фокус, то он передается в связанный управляющий элемент. Примеры см. ниже в разделе о клавишах доступа.

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