17   Формы

17.1 Введение

Форма HTML это раздел документа, содержащий обычные данные, разметку, специальные элементы, называемые "элементы управления" (переключатель, radio-кнопка, меню и т.д.), и лэйблы для этих элементов управления.
Пользователи обычно "заполняют" форму, изменяя содержимое её элементов (вводя текст, выбирая пункты меню и т.д.), прежде чем отправить её агенту для обработки (напр., Web-серверу, mai-серверу и т.п.)

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Last name: </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"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

17.2 Элементы управления

Пользователь взаимодействует с формой посредством элементов управления.

Имя элемента управления (ЭУ),  "control name", задаётся атрибутом name. Областью видимости атрибута name ЭУ внутри формы является элемент FORM.

Каждый ЭУ имеет начальное и текущее значение типа "символьная строка". См. определение каждого ЭУ для спецификации начальных значений и возможные ограничения значений, принимаемых ЭУ. В целом, "начальное значение\initial value" может быть установлено атрибутом value ЭУ.  Однако начальное значение ЭУ TEXTAREA задаётся его содержимым, а начальное значение ЭУ OBJECT в форме определяется реализацией данного объекта (т.е. находится вне пределов данной спецификации).

"Текущее значение\current value" ЭУ вначале устанавливается в первоначальное значение. После этого текущее значение ЭУ можно изменять, взаимодействуя с пользователем, и с помощью скриптов (сценариев).

 Начальное значение ЭУ не изменяется. Таким образом, при очистке формы текущее значение каждого ЭУ устанавливается в начальное значение.
Если ЭУ не имеет начального значения, воздействие очистки формы на данный ЭУ не определено.

При отправке формы на обработку, некоторые ЭУ образуют пары "имя/значение", которые затем пересылаются с формой. ЭУ, чьи пары имя/значение высланы, называются "действующие ЭУ".

17.2.1 Типы элементов управления формы (ЭУ)

HTML определяет следующие типы ЭУ:

кнопки

Авторы могут создавать кнопки трёх типов:

• кнопки submit: при активации кнопка submit отправляет форму. Форма может содержать несколько кнопок submit;
• кнопки reset: при активации кнопка reset устанавливает все ЭУ в их начальные значения;
• кнопки push: кнопки push не имеют предопределённых функций. Каждая кнопка push может иметь клиентский сценарий (выполняемый на стороне клиента), ассоциированный с атрибутом event/событие. При возникновении события (напр., пользователь нажал  кнопку, отпустил её и т.д.), включается ассоциированный сценарий (скрипт).

  Автор должен указать язык сценария кнопки push путём объявления языка скриптов по умолчанию (в элементе META).

Авторы создают кнопки, используя ЭУ BUTTON, или ЭУ INPUT. См. определение этих ЭУ .

Примечание. Авторы должны иметь в виду, что возможности ЭУ BUTTON  богаче, чем у INPUT.

переключатели/checkboxes

Переключатели (и radio-кнопки) это переключатели типа вкл./выкл., управляемые пользователем. Переключатель "включён", если установлен атрибут checked ЭУ. Если форма отправлена, только переключатель "включён" может быть "действующим".

Несколько переключателей в форме могут использовать одно имя ЭУ. Так, например, переключатели позволяют пользователям выбрать несколько значений для одного свойства. ЭУ INPUT используется для создания переключателей.

radio-кнопки

Radio-кнопки похожи на переключатели/checkboxes, за исключением того, что, при использовании одного и того же имени ЭУ, они действуют взаимоисключающе: если одна выбрана "включено", все остальные с тем же именем "выключены". Элемент INPUT используется для создания  ЭУ "radio-кнопка".

Если ни одна radio-кнопка из использующих общее имя первоначально не установлена во "включено", поведение пользовательского агента (ПА) по установлению того, какая из кнопок включена, не определено.
Примечание. Поскольку существующие приложения обрабатывают эту ситуацию по-разному, данная спецификация отличается от RFC 1866 ([RFC1866] раздел 8.1.2.4) в следующем:

В определённый момент времени только одна radio-кнопка из набора может быть "включена". Если ни один из элементов <INPUT> набора radio-кнопок не установлен (`CHECKED'), тогда ПА обязан вначале включить первую из кнопок набора.

Поскольку поведение ПА различно, авторы должны убедиться, что в каждом наборе radio-кнопок одна "включена".

меню

Меню дают возможность выбора из списка значений. Элемент SELECT создаёт меню в комбинации с элементами OPTGROUP и OPTION.

текстовые поля

Авторы могут создавать поля для ввода текста двух видов. Элемент INPUT создаёт однострочный ЭУ, а элемент TEXTAREA - многострочный. В обоих случаях, введённый текст становится текущим значением.

выбор файла/file select

ЭУ этого типа позволяют пользователям выбрать файлы, и их содержимое может пересылаться с формой. Элемент INPUT используется для создания ЭУ выбор файла/file select.

hidden control/скрытый ЭУ

Авторы могут создавать невидимые ЭУ, значения которых пересылаются вместе с формой. Обычно ЭУ этого типа используются для хранения информации при обмене клиент/сервер, которая иначе может быть утеряна из-за нестатичной природы HTTP (см. [RFC2616]). Элемент INPUT используется для создание скрытых ЭУ/hidden control.

ЭУ object

Авторы могут вставлять в форму общие объекты, чьи ассоциированные значения пересылаются вместе с другими данными. Авторы создают объект с помощью ЭУ OBJECT.

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

17.3 Элемент FORM

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- интерактивная форма -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #НЕОБХОДИМ -- обработчик на стороне сервера --
  method      (GET|POST)     GET       -- HTTP метод отправки формы--
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #ПРЕДПОЛАГАЕТСЯ  -- список типов MIME для загрузки файлов --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ  -- имя формы (для скриптов) --
  onsubmit    %Script;       #ПРЕДПОЛАГАЕТСЯ  -- событие: форма отправлена --
  onreset     %Script;       #ПРЕДПОЛАГАЕТСЯ  -- событие: форма очищена --
  accept-charset %Charsets;   #ПРЕДПОЛАГАЕТСЯ  -- список поддерживаемых наборов символов --
  >

Начальный тег: необходим, Конечный тег: необходим

Элемент FORM действует как контейнер для  ЭУ. Он определяет:

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

Форма может содержать текст и разметку (параграфы, списки и т.п.) в дополнение к  ЭУ формы.

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

См. раздел отправка формы о том, как ПА должны готовить данные формы для сервера и как ПА должны обработать ожидаемый ответ.

17.4 Элемент INPUT

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- имя атрибута требуется для всех, кроме submit и reset -->
<!ELEMENT INPUT - O EMPTY              -- ЭУ формы -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- тип ЭУ --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ  -- отправляется как часть формы --
  value       CDATA          #ПРЕДПОЛАГАЕТСЯ  -- для radio-кнопок и переключателей --
  checked     (checked)      #ПРЕДПОЛАГАЕТСЯ  -- для radio-кнопок и переключателей --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в данном контексте --
  readonly    (readonly)     #ПРЕДПОЛАГАЕТСЯ  -- для text и passwd --
  size        CDATA          #ПРЕДПОЛАГАЕТСЯ  -- специфичен для каждого типа поля --
  maxlength   NUMBER         #ПРЕДПОЛАГАЕТСЯ  -- максимальное к-во символов для полей text --
  src         %URI;          #ПРЕДПОЛАГАЕТСЯ  -- для полей с изображениями --
  alt         CDATA          #ПРЕДПОЛАГАЕТСЯ  -- краткое описание --
  usemap      %URI;          #ПРЕДПОЛАГАЕТСЯ  -- использовать клиентские карты изображений --
  ismap       (ismap)        #ПРЕДПОЛАГАЕТСЯ  -- использовать серверные карты изображений --
  tabindex    NUMBER         #ПРЕДПОЛАГАЕТСЯ  -- позиция в порядке табуляции --
  accesskey   %Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus     %Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur      %Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  onselect    %Script;       #ПРЕДПОЛАГАЕТСЯ  -- текст был выделен --
  onchange    %Script;       #ПРЕДПОЛАГАЕТСЯ  -- значение элемента было изменено --
  accept      %ContentTypes; #ПРЕДПОЛАГАЕТСЯ  -- список типов MIME для загрузки файлов --
  >

Начальный тег: необходим, Конечный тег: запрещён

17.4.1 Типы ЭУ, создаваемых  в элементе INPUT

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

text

Однострочный ЭУ для ввода текста.

password

Как  "text", но вводимый текст изображается так, чтобы скрыть вводимые символы (напр., серией "звёздочек"). ЭУ этого типа часто используется для ввода специальной информации, напр., пароля. Заметьте, что текущее значение, это текст, введённый пользователем, а не текст, изображаемый ПА.

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

checkbox

Создаёт переключатель.

radio

Создаёт кнопку radio.

submit

Создаёт кнопку submit.

image

Создаёт кнопку submit. Значение атрибута src определяет URI изображения, служащего для украшения кнопки. Из соображений доступности, авторы должны предоставлять альтернативный текст установкой атрибута alt.

Если для щелчка на кнопке image используется указательное устройство (мышь и т.п.), форма отправляется и координаты щелчка передаются серверу. Значение Х измеряется в пикселах от левого края изображения, а значение У - в пикселах от верхнего края изображения. Отправленные данные включают значения name.x=x-value и name.y=y-value, где "name" это значение атрибута name, а x-value и y-value это значения координат x и y соответственно.

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

• Использовать несколько кнопок submit (каждая со своим изображением) вместо единой графической кнопки submit. Авторы могут использовать таблицы стилей для управления положением кнопок.
• Использовать клиентские карты изображений в сочетании со скриптами.

reset

Создаёт a кнопку reset.

button

Создаёт кнопку push. ПА должны использовать значение атрибута value как лэйбла кнопки.

hidden

Создаёт элемент hidden.

file

Создаёт ЭУ file select. ПА могут использовать значение атрибута value начальное имя файла.

17.4.2 Примеры форм, содержащих ЭУ в элементе INPUT

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    First name: <INPUT type="text" name="firstname"><BR>
    Last name: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
    <P>
    <INPUT type="button" value="Click Me" onclick="verify()">
 </FORM>
</BODY>

<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>

17.5 Элемент BUTTON

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- кнопка push -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ
  value       CDATA          #ПРЕДПОЛАГАЕТСЯ  -- отсылается на сервер при отправке формы --
  type        (button|submit|reset) submit   -- используется как кнопка формы --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в этом контексте --
  tabindex    NUMBER         #ПРЕДПОЛАГАЕТСЯ  -- позиция при табуляции --
  accesskey   %Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus     %Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur      %Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  >

Начальный тег: необходим, Конечный тег: необходим

Кнопки, созданные элементом BUTTON работают почти так же, как и кнопки, созданные элементом