Опубликован: 19.05.2006 | Доступ: свободный | Студентов: 9815 / 1466 | Оценка: 4.29 / 4.03 | Длительность: 22:29:00
ISBN: 978-5-94774-648-8
Лекция 17:

Формы

Элементы SELECT, OPTGROUP и OPTION

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- селектор опций -->
<!ATTLIST SELECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ   -- имя поля --
  size        NUMBER         #ПРЕДПОЛАГАЕТСЯ  -- видимые ряды --
  multiple    (multiple)     #ПРЕДПОЛАГАЕТСЯ   -- по умолчанию в одном выделении --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ   -- недоступен в данном контексте --
  tabindex    NUMBER         #ПРЕДПОЛАГАЕТСЯ   -- позиция при табуляции --
  onfocus     %Script;       #ПРЕДПОЛАГАЕТСЯ   -- элемент получил фокус --
  onblur      %Script;       #ПРЕДПОЛАГАЕТСЯ   -- элемент потерял фокус --
  onchange    %Script;       #ПРЕДПОЛАГАЕТСЯ   -- значение элемента изменено --
  >
Начальный тег: необходим, Конечный тег: необходим

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

name = cdata [CI]

Устанавливает имя ЭУ.

size = number [CN]

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

multiple [CI]

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

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

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)
  • disabled (недоступен)
  • tabindex (табуляция)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент SELECT создаёт меню. Каждая опция выбора представляется элементом OPTION. Элемент SELECT должен содержать не менее одного элемента OPTION.

Элемент OPTGROUP позволяет группировать опции логически. Это особенно удобно, когда пользователь должен выбрать из большого списка опций: группы связанных опций легче осмыслить и запомнить, чем один большой список опций. В HTML 4 все элементы OPTGROUP должны быть определены непосредственно в элементе SELECT (т.е. группы не могут быть вложенными).

Предустановленные опции

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

  • Если ни один элемент OPTION не имеет установленного атрибута selected, поведение ПА по определению предустановленной опции не определено.

    Примечание. Поскольку существующие программы обрабатывают эту ситуацию по-разному, данная спецификация отличается от RFC 1866 ( "Индекс элементов" раздел 8.1.3):

    Первоначально выбранной является опция 1, если только отсутствует атрибут SELECTED или любой из элементов <OPTION>.

    Поскольку поведение ПА различно, авторы должны удостовериться, что каждое меню включает предустановленную опцию ( OPTION )по умолчанию.

  • Если один из элементов OPTION имеет установленный атрибут selected, он должен быть предустановленным.
  • Если элемент SELECT имеет установленный атрибут multiple, и более чем один элемент OPTION имеет установленный атрибут selected, они все должны быть предустановлены.
  • Считается ошибкой, если более чем один элемент OPTION имеет установленный атрибут selected, и элемент SELECT не имеет установленного атрибута multiple. ПА могут по-разному обрабатывать такие ошибки, но не должны предустанавливать более чем одну опцию выбора.
<!ELEMENT OPTGROUP - - (OPTION)+ -- группа опций -->
<!ATTLIST OPTGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в этом контексте --
  label       %Text;         #НЕОБХОДИМ -- для использования в иерархическом меню --
  >
Начальный тег: необходим, Конечный тег: необходим

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

label = text [CS]

Определяет лэйбл для группы опций.

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

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)
  • disabled (недоступен)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
Примечание. Разработчики должны помнить, что следующие версии HTML могут расширить механизм группировки, чтобы разрешить вложенные группы (т.е., элементы OPTGROUP могут быть вложенными). Это позволит авторам определять возможность более сложного выбора.
<!ELEMENT OPTION - O (#PCDATA)         -- опции выбора -->
<!ATTLIST OPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  selected    (selected)     #ПРЕДПОЛАГАЕТСЯ
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в данном контексте --
  label       %Text;         #ПРЕДПОЛАГАЕТСЯ  -- для использования в иерархических меню --
  value       CDATA          #ПРЕДПОЛАГАЕТСЯ  -- значения по умолчанию для содержимого элемента --
  >
Начальный тег: необходим, Конечный тег: не обязателен

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

selected [CI]

Если установлен, этот булев атрибут определяет, какая из опций предустановлена.

value = cdata [CS]

Определяет начальное значение ЭУ. Если не установлен, начальное значение установлено на содержимое элемента OPTION.

label = text [CS]

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

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

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)
  • disabled (недоступен)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

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

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

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

После SELECT идут кнопки submit и reset.

<FORM action="http://somesite.com/prog/component-select" method="post">
   <P>
   <SELECT multiple size="4" name="component-select">
      <OPTION selected value="Component_1_a">Component_1</OPTION>
      <OPTION selected value="Component_1_b">Component_2</OPTION>
      <OPTION>Component_3</OPTION>
      <OPTION>Component_4</OPTION>
      <OPTION>Component_5</OPTION>
      <OPTION>Component_6</OPTION>
      <OPTION>Component_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>

Только выбранные опции будут действующими (используя имя ЭУ "component-select" ). Если ни одна опция не выбрана, ЭУ является недействующим, и ни имя, ни какое-либо его значение не отсылаются серверу при отправке формы. Заметьте, что если атрибут value установлен, он определяет начальное значение ЭУ и является в то же время содержимым элемента.

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

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

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

None
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). Пользователь раскрыл два ниспадающих меню, но ещё не выбрал новое значение (PortMaster 2, 3.7). Заметьте, что каждое каскадное меню отображает лэйбл элемента OPTGROUP или OPTION.

Ирина Кириллова
Ирина Кириллова

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

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989