Все записи автора Андрей Семенов

Теги thead, tfoot и tbody — группы строк таблицы

Группы строк: элементы THEAD, TFOOT и TBODY

<!ELEMENT THEAD    - O (TR)+           -- заголовок таблицы -->
<!ELEMENT TFOOT    - O (TR)+           -- нижний заголовок таблицы -->

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

<!ELEMENT TBODY    O O (TR)+           -- тело таблицы -->

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

<!ATTLIST (THEAD|TBODY|TFOOT)          -- раздел таблицы --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- горизонтальное выравнивание в ячейках --
  %cellvalign;                         -- вертикальное выравнивание в ячейках --
  >

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

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup,
    onmouseover, onmousemove, onmouseout, onkeypress,
    onkeydown, onkeyup(внутренние события)
  • align, char, charoff, valign (выравнивание ячейки)

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

Заголовки таблицы должны содержать информацию о столбцах таблицы. Тело таблицы должно содержать строки данных таблицы.

Если элементы THEAD, TFOOT и TBODY присутствуют, каждый из них содержит группу строк. Каждая группа строк должна содержать по крайней мере одну строку, определяемую элементом TR.

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

<TABLE>
<THEAD>
     <TR> ...заголовок...
</THEAD>
<TFOOT>
     <TR> ...нижний заголовок...
</TFOOT>
<TBODY>
     <TR> ...первая строка данных блока 1...
     <TR> ...вторая строка данных блока 1...
</TBODY>
<TBODY>
     <TR> ...первая строка данных блока 2...
     <TR> ...вторая строка данных блока 2...
     <TR> ...третья строка данных блока 2...
</TBODY>
</TABLE>

Элемент TFOOT должен располагаться до элемента TBODY в определении TABLE, чтобы агенты пользователей могли генерировать нижний заголовок до получения всех (возможно, многочисленных) строк данных. Ниже приводится сводка обязательных тегов и тегов, которые можно опустить:

  • Начальный тег TBODY всегда обязателен, если только таблица не содержит единственного тела без верхних и нижних заголовков. Конечный тег TBODY всегда можно опускать.
  • Начальные теги для элементов THEAD и TFOOT обязательны, если в таблице присутствуют верхний и нижний заголовки, но соответствующие конечные теги можно опускать.

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

Таблицу из предыдущего примера можно сократить, удалив конечные теги, как показано ниже:

<TABLE>
<THEAD>
     <TR> ...верхний заголовок...
<TFOOT>
     <TR> ...нижний заголовок...
<TBODY>
     <TR> ...первая строка данных блока 1...
     <TR> ...вторая строка данных блока 1...
<TBODY>
     <TR> ...первая строка данных блока 2...
     <TR> ...вторая строка данных блока 2...
     <TR> ...третья строка данных блока 2...
</TABLE>

Разделы THEAD, TFOOT и TBODYдолжны содержать одинаковое число столбцов.

Тег caption — заголовок таблицы

Подписи таблиц: тэг CAPTION

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

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

align = top|bottom|left|right [CI]
Нежелателен. Для визуальных агентов пользователей этот атрибут указывает положение caption относительно таблицы. Возможные значения:

  • top: caption находится наверху таблицы. Это значение используется по умолчанию.
  • bottom: caption находится внизу таблицы.
  • left: caption находится слева от таблицы.
  • right: caption находится справа от таблицы.

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

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

Если элемент CAPTION присутствует, его текст должен описывать предмет таблицы. Элемент CAPTION может располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION.

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

Таким образом, авторы должны позаботиться о предоставлении дополнительной информации, описывающей назначение и структуру таблицы с помощью атрибута summary элемента TABLE. Это особенно важно для таблиц, не имеющих captions. На примерах ниже показано использование атрибута summary.

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

Тег table — таблица

Тэг TABLE

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

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

summary = текст [CS]
Краткая информация о назначении и структуре таблицы для агентов пользователей, выполняющих генерацию для невизуальных средств, таких как синтезаторы речи или азбуки Бройля.
align = left|center|right [CI]
Deprecated. Этот атрибут задает положение таблицы относительно документа. Допустимые значения:

  • left: Таблица находится в левой части документа.
  • center: Таблица находится в центре документа.
  • right: Таблицы находится в правой части документа.
width = длина [CN]
Этот атрибут определяет необходимую ширину всей таблицы и предназначен для визуальных объектов пользователей. Если значение указано в процентах, это означает долю в процентах от доступного горизонтального пространства. Если ширина не указана, она определяется агентом пользователя.

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

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup,
    onmouseover, onmousemove, onmouseout, onkeypress,
    onkeydown, onkeyup(внутренние события)
  • bgcolor (цвет фона)
  • frame, rules, border (границы и rules)
  • cellspacing, cellpadding (поля в ячейках)

Элемент TABLE содержит все другие элементы, определяющие заголовок, строки, содержимое и форматирование.

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

  • Предоставление пользователю информации о таблице. Авторам следует предоставлять краткую информацию о содержании и структуре таблицы, чтобы люди, работающие с невизуальными агентами пользователей, могли лучше понять ее.
  • Генерация caption, если он определен.
  • Генерация верхнего заголовка таблицы, если он определен. Генерация нижнего заголовка, если он определен. Агенты пользователей должны знать, где нужно генерировать верхний и нижний заголовки. Например, если средство вывода делится на страницы, агенты пользователей могут помещать верхний заголовок в верхней части каждой страницы, а нижний — внизу. Точно так же, если агент пользователя предоставляет механизм прокрутки строк, верхний заголовок может отображаться вверху прокручиваемой области, а нижний — внизу.
  • Вычисление числа столбцов в таблице. Помните, что число строк в таблице равно числу элементов TR, содержащихся в элементеTABLE.
  • Группировка столбцов в соответствии со спецификациями групп столбцов.
  • Построчная генерация ячеек и группировка в столбцы между верхним и нижним заголовками. Визуальные агенты пользователей должны форматировать таблицы в соответствии с атрибутами HTML и спецификациями таблиц стилей.

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

Чтобы агенты пользователей могли форматировать таблицу за один проход, авторы должны сообщить агентам пользователей следующую информацию:

  • Число столбцов в таблице. Подробнее о том, как указать эту информацию, см. в разделе о подсчете числа столбцов в таблице.
  • Ширину столбцов. Подробнее о том, как указать эту информацию, см. в разделе о подсчете ширины столбцов.

Более точно агент пользователя может сгенерировать таблицу за один проход, когда ширина столбцов указана с использованием комбинации элементов COLGROUP и COL. Если для какого-либо столбца указана относительная ширина или ширина в процентах (см. раздел о подсчете ширины столбцов), авторы должны также указать ширину самой таблицы.

Направление таблиц

Направление таблицы либо наследуется (по умолчанию используется направление слева направо), либо определяется атрибутом dirэлемента TABLE.

Для таблиц, направление которых слева направо, нулевой столбец находится слева, а нулевая строка — сверху. Для таблиц, направление которых справа налево, нулевой столбец находится справа, а нулевая строка — сверху.

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

Помните, что TABLE - единственный элемент, для которого атрибут dir обращает визуальный порядок столбцов; нельзя изменить порядок одной строки (TR) или группы столбцов (COLGROUP).

Если для элемента TABLE установлен атрибут dir, он также влияет на направление текста в ячейках таблицы (поскольку атрибут dirнаследуется элементами уровня блока).

Чтобы определить таблицу с направлением справа налево, установите атрибут dir следующим образом:

<TABLE dir="RTL">
...продолжение таблицы...
</TABLE>

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

Теги fieldset и legend — объединение элементов формы

Добавление в формы структуры: элементы FIELDSET и LEGEND

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

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

align = top|bottom|left|right [CI]
Нежелателен. Определяет положение legend относительно набора полей. Возможные значения:

  • top: legend располагается сверху набора полей. Это значение используется по умолчанию.
  • bottom: legend располагается внизу набора полей.
  • left: legend располагается в левой части набора полей.
  • right: legend располагается в правой части набора полей.

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

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

Элемент FIELDSET позволяет авторам группировать связанные метки и управляющие элементы по темам. Группировка управляющих элементов упрощает пользователям понимание назначения элементов, одновременно упрощая переход по клавише tab для визуальных агентов пользователей и речевую навигацию для звуковых агентов пользователей. Корректное использование этого элемента повышает доступность документов.

Элемент LEGEND позволяет авторам назначать заголовки для элемента FIELDSET. Legend повышает доступность, если элемент FIELDSETпредставляется невизуально.

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

<FORM action="..." method="post">
 <P>
 <FIELDSET>
  <LEGEND>Личная информация</LEGEND>
  Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1">
  Имя: <INPUT name="personal_firstname" type="text" tabindex="2">
  Адрес: <INPUT name="personal_address" type="text" tabindex="3">
  ...другая персональная информация...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>История болезни</LEGEND>
  <INPUT name="history_illness"
         type="checkbox"
         value="Smallpox" tabindex="20"> Smallpox
  <INPUT name="history_illness"
         type="checkbox"
         value="Mumps" tabindex="21"> Mumps
  <INPUT name="history_illness"
         type="checkbox"
         value="Dizziness" tabindex="22"> Dizziness
  <INPUT name="history_illness"
         type="checkbox"
         value="Sneezing" tabindex="23"> Sneezing
  ...продолжение истории болезни...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Текущее лечение</LEGEND>
  Принимаете ли Вы сейчас медицинские препараты?
  <INPUT name="medication_now"
         type="radio"
         value="Yes" tabindex="35">Да
  <INPUT name="medication_now"
         type="radio"
         value="No" tabindex="35">Нет

  Если да, перечислите их ниже:
  <TEXTAREA name="current_medication"
            rows="20" cols="50"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM>

Обратите внимание, что в этом примере мы можем улучшить визуальное представление формы, добавив элементы в каждый элемент FIELDSET (с помощью таблиц стилей), добавив информацию о цвете и шрифте (с помощью таблиц стилей), добавив скрипты (например, чтобы область «текущее лечение» открывалась, только если пользователь указывает, что он проходит лечение) и т.д

Тег label — подсказка к элементу формы

Элемент LABEL

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

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

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 переходит фокус, то он передается в связанный управляющий элемент. Примеры см. ниже в разделе о клавишах доступа.

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

Тег textarea — поле текстового ввода

Тэг TEXTAREA

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

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

name = cdata [CI]
Имя управляющего элемента.
rows = number [CN]
Число видимых текстовых строк. Пользователи должны иметь возможность вводить большее количество строк, поэтому агенты пользователей должны обеспечивать средства прокрутки этого управляющего элемента, если содержимое уходит за пределы видимой области.
cols = number [CN]
Видимая ширина, выраженная шириной среднего символа. Пользователи должны иметь возможность вводить более длинные строки, поэтому агенты пользователей должны обеспечивать средства прокрутки этого управляющего элемента, если содержимое уходит за пределы видимой области. Агенты пользователей могут разбивать видимые тестовые строки, чтобы длинные строки были видны без прокрутки.

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

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

Элемент 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 передается с формой.

Тег input — различные элементы ввода

Тэг INPUT

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

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

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
Определяет тип управляющего элемента. По умолчанию используется значение «text».
name = cdata [CI]
Определяет имя управляющего элемента.
value = cdata [CA]
Определяет начальное значение управляющего элемента. Этот атрибут не обязателен, если только для атрибута type не установлено значение «radio».
size = cdata [CN]
Сообщает агенту пользователя начальную ширину управляющего элемента. Ширина дается в пикселах, если для атрибута type не установлено значение «text» или «password». В этом случае ширина задается в числе символов (число должно быть целым).
maxlength = число [CN]
Если для атрибута type установлено значение «text» или «password», этот атрибут определяет максимальное число символов, вводимых пользователем. Это число может превышать указанный в атрибуте size размер поля; в этом случае агент пользователя должен обеспечивать механизм прокрутки. По умолчанию число символов не ограничено.
checked [CI]
Если для атрибута type установлено значение «radio» или «checkbox», этот логический атрибут указывает, что флажок установлен. Агенты пользователей должны игнорировать этот атрибут для других типов управляющих элементов.
src = uri [CT]
Если атрибут type имеет значение «image», этот атрибут определяет местоположение изображения, используемое для представления графической кнопки.

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

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • alt (альтернативный текст)
  • align (выравнивание)
  • accept (допустимые типы содержимого для сервера)
  • readonly (управляющие элеметы ввода только для чтения)
  • disabled (отключенные управляющие элементы ввода)
  • tabindex (переход по нажатию клавиши tab)
  • accesskey (клавиши доступа)
  • usemap (клиентские изображения-карты)
  • onfocus, onblur, onselect, onchange, onclick, ondblclick,
    onmousedown, onmouseup, onmouseover, onmousemove,
    onmouseout,onkeypress, onkeydown, onkeyup (внутренние события)

Типы управляющих элементов, создаваемые с помощью элемента INPUT

Тип управляющего элемента, определяемый элементом INPUT, зависит от значения атрибута type:

text
Создает элемент для ввода текста из одной строки.
password
Аналогичен значению «text», но вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек). Этот управляющий элемент часто используется для ввода паролей. Обратите внимание, что текущим значениемявляется текст, введенный пользователем, а не текст, представляемый агентом пользователя.

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

checkbox
Создает флажок.
radio
Создает кнопку с зависимой фиксацией.
submit
Создает кнопку отправки.
image
Создает графическую кнопку отправки. Значение атрибута src задает URI изображения, используемого для представления кнопки. Из соображений доступности авторам следует предусматривать альтернативный текст для изображения с помощью атрибута alt.Если для щелчка на изображении используется указующее устройство, на сервер передаются форма и координаты щелчка. Значение x измеряется в пикселах от левой границы изображения, а значение y — в пикселах от верхней границы изображения. В передаваемые данные включаются последовательности имя.x=значение-x и name.y=значение-y, где «имя» - значение атрибутаname, а значение-x и значение-y - значения координат x и y соответственно.Если сервер предпринимает различные действия в зависимости от места щелчка, пользователи неграфических браузеров не смогут воспользоваться этим свойством. По этой причине авторам следует предусматривать альтернативные подходы:

  • Использовать несколько кнопок отправки (каждая с отдельным изображением) вместо одной графической кнопки. Можно использовать для управления местоположением этих кнопок таблицы стилей.
  • Использовать клиентские изображения-карты и скрипты.
reset
Создает кнопку сброса.
button
Создает другую кнопку. Агенты пользователей должны использовать в качестве метки на кнопке значение атрибута value.
hidden
Создает невидимый управляющий элемент.
file
Создает управляющий элемент выбор файла. Агенты пользователей могут использовать значение атрибута value в качестве исходного имени файла.

Примеры форм с управляющими элементами типа INPUT

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

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    Имя: <INPUT type="text" name="firstname"><BR>
    Фамилия: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="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 мы обсудим разметку меток типа «First name».

 

В следующем примере в случае события «onclick» включается функция JavaScript с именем verify:

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
    <P>
    <INPUT type="button" value="Нажми тут" onclick="verify()">
 </FORM>
</BODY>

Подробнее о скриптах и событиях Вы можете узнать в разделе о внутренних событиях.

В следующем примере показано, как содержимое указанного пользователем файла -может передаваться вместе с формой. У пользователя запрашивается имя и список имен файлов, содержимое которых должно передаваться с формой. С помощью указания значение enctype для «multipart/form-data» содержимое всех файлов будет упаковываться для передачи в отдельные разделы существующего документа.

<FORM action="http://server.dom/cgi/handle"
    enctype="multipart/form-data"
    method="post">
 <P>
 Как Вас зовут? <INPUT type="text" name="name_of_sender">
 Какие файлы Вы отправляете? <INPUT type="file" name="name_of_files">
 </P>
</FORM>

Тег form — форма

Тэг FORM

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

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

action = uri [CT]
Задает агента для обработки формы. Например, значением может быть URI HTTP (для передачи формы в программу) или mailto URI (для отправки формы по электронной почте).
method = get|post [CI]
Определяет метод HTTP, используемый для передачи набора данных формы. Возможные значения (с учетом регистра) — «get» (по умолчанию) и «post». Подробнее см. в разделе об отправке формы.
enctype = content-type [CI]
Этот атрибут задает тип содержимого, используемый для отправки формы на сервер (если для метода используется значение «post»). По умолчанию для этого атрибута используется значение »application/x-www-form-urlencoded». С элементом INPUT,type=»file» должно использоваться значение »multipart/form-data».
accept-charset = список наборов символов [CI]
Этот атрибут задает список кодировок символов для ввода данных, которые должны приниматься обрабатывающим эту форму сервером. Значением является разделенный пробелами и/или запятыми список значений charset. Сервер должен интерпретировать этот список как список исключающих или, то есть он должен принимать любую кодировку для загруженного объекта.По умолчанию значением этого атрибута является зарезервированная строка «UNKNOWN». Агенты пользователей могут интерпретировать это значение как кодировку символов, используемую для передачи документа, содержащего этот элемент FORM.
accept = content-type-list [CI]
Этот атрибут определяет разделенным запятыми список типов содержимого, которые должен корректно обрабатывать сервер, обрабатывающий форму. Агенты пользователей могут использовать эту информацию для отфильтровывания отвечающих спецификации файлов при предложении пользователю выбора файлов для отправки на сервере (если в элементе INPUT указаноtype=»file»).

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

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

Элемент FORM служит контейнеров для управляющих элементов. Он определяет:

  • Макет формы (дается содержимым элемента).
  • Программу, которая будет обрабатывать заполенную и переданную форму (атрибут action). Получающая форму программа должна иметь возможность определения пар имя/значение, чтобы их использовать.
  • Метод отправки данных на сервер (атрибут method).
  • Кодировку символов, которая должна приниматься сервером для обработки этой формы (атрибут accept-charset). Агенты пользователей могут рекомендовать пользователю значение атрибута accept-charset и/или не позволять пользователям вводить нераспознаваемые символы.

Форма помимо управляющих элементов может содержать текст и разметку (абзацы, списки и т.д.).

В следующем примере показана форма, которая должна обрабатываться программой «adduser». Эта форма будет отправляться с использованием метода HTTP «post».

 <FORM action="http://somesite.com/prog/adduser" method="post">
 ...содержимое формы...
 </FORM>

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

 <FORM action="mailto:Kligor.T@gee.whiz.com" method="post">
 ...содержимое формы...
 </FORM>

Теги select, optgroup и option — выбор

Элементы 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 (т.е. группы не могут быть вложенными).

Тег button — кнопка

Элемент BUTTON

 

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

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

name = cdata [CI]
Определяет имя управляющего элемента.
value = cdata [CS]
Определяет начальное значение кнопки.
type = submit|button|reset [CI]
Объявляет тип кнопки. Возможные значения:

  • submit: Создает кнопку отправки. Это значение используется по умолчанию.
  • reset: Создает кнопку сброса.
  • button: Создает другую кнопку.

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

  • disabled (отключенные управляющие элементы ввода)
  • accesskey (клавиши доступа)
  • usemap (клиентские изображения-карты)
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,
    onmouseover, onmousemove, onmouseout, onkeypress,
    onkeydown,onkeyup (внутренние события)

Кнопки, создаваемые с помощью элемента BUTTON, действуют так же, как и кнопки, создаваемые с помощью элемента INPUT, но они обеспечивают более богатые возможности представления: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, действует и может resemble подобно элементу INPUT, для атрибута type которого установлено значение «image», но тип элемента BUTTON может иметь содержимое content.

Визуальные агенты пользователей могут представлять кнопки BUTTON рельефно или с эффектом нажатия при щелчке мыши, в то время как кнопки INPUT могут представляться только как «плоские» изображения.

В следующем примере предыдущий пример расширяется, и кнопки отправки и сброса создаются с помощью элемента BUTTON вместо элемента INPUT. Используемое для кнопок изображение определяется элементом IMG.

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    Имя: <INPUT type="text" name="firstname"><BR>
    Фамилия: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Мужской<BR>
    <INPUT type="radio" name="sex" value="Female"> Женский<BR>
    <BUTTON name="submit" value="Отправить" type="submit">
    Send<IMG src="/icons/wow.gif" alt="Ого"></BUTTON>
    <BUTTON name="reset" type="reset">
    Reset<IMG src="/icons/oops.gif" alt="ой"></BUTTON>
    </P>
 </FORM>

Помните, что авторам следует предусматривать альтернативный текст для элемента IMG.

Не допускается связывать изображение-карту с элементом IMG, содержащимя в элементе BUTTON element.

ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере представлен недопустимый код HTML.

<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>