Архив рубрики: Элементы форм

Теги 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>