17 Форми

17.1 Введення в форми

Форма HTML - це розділ документа, в якому містяться звичайна інформація, розмітка і спеціальні елементи, звані керуючими елементами (прапорці, кнопки з залежною фіксацією, меню і т.д.), а також мітки цих керуючих елементів. Зазвичай користувачі "заповнюють" форму, модифікуючи керуючі елементи (вводячи текст, вибираючи пункти меню і т.д.) перед тим, як надати форму агентц користувача для обробки (наприклад, на Web-серввер, на поштовий сервер і т.д.)

  <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"> Адреса електронної пошти: </ 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>

17.2 Керуючі елементи

Користувачі взаємодіють з формами за допомогою іменованих керуючих елементів.

"Ім'я елемента" задається атрибутом name. Областю дії атрибута name для керуючого елемента в елементі FORM є елемент FORM .

Кожен керуючий елемент має початкове і поточне значення, обидва вони є символьними рядками. Інформацію про початкових значеннях і можливі обмеження на значення см. У визначенні керуючого елемента. У загальному випадку "початкове значення" керуючого елемента може задаватися за допомогою атрибута value. Однак початкове значення елемента TEXTAREA задається його вмістом, а початкове значення елемента OBJECT в формі визначається реалізацією об'єкта (тобто лежить поза області, що розглядається в даній специфікації).

"Поточне значення" керуючого елемента спочатку встановлюється рівним початкового значення. Потім поточне значення може змінюватися користувачем або скриптами.

Початкове значення керуючого елемента не змінюється. Таким чином при скиданні форми кожне поточне значення встановлюється рівним початкового значення. Якщо керуючий елемент не має початкового значення, результат скидання форми непередбачуваний.

Коли форма надається для обробки, з формою передаються пари керуючий елемент-поточне значення. Передані пари ім'я / значення називаються успішними керуючими елементами .

17.2.1 Типи керуючих елементів

В HTML визначені наступні типи керуючих елементів:

кнопки

Автори можуть створювати три типи кнопок:

• кнопки відправки : При активізації такої кнопки проводиться відправка форми. У формі може бути кілька кнопок відправки.
• кнопки скидання : При активізації такої кнопки для всіх керуючих елементів встановлюються вихідні значення.
• інші кнопки : Для таких кнопок дію за замовчуванням не визначено. З атрибутами подій кожної такої кнопки можуть бути пов'язані клієнтські скрипти . Якщо проісхходіт подія (наприклад, пользователль натискає кнопку, відпускає її і т.д.), включається пов'язаний з подією скрипт.

  Автори повинні визначати мову скрипта для кнопок в оголошенні скрипта за замовчуванням (в елементі META ).

Автори створюють кнопки за допомогою елемента BUTTON або INPUT . Детальніше про визначення різних типів кнопок см. У визначенні цих елементів.

Примітка. Авторам варто звернути увагу на те, що елемент BUTTON надає ширші можливості подання кнопки, ніж елемент INPUT .

прапорці

Прапорці (і кнопки з залежною фіксацією) - це перемикачі вкл. / Викл., Які можуть перемикатися користувачем. Перемикач "включений", якщо для керуючого елементу встановлено атрибут selected .

При відправці форми успішними можуть стати тільки включені перемикачі. Кілька прапорців у формі можуть мати один і той же ім'я керуючого елемента. Таким чином, наприклад, прапорці дозволяють користувачам вибрати кілька значень для одного і того ж властивості. Для створення прапорців використовується елемент INPUT .

кнопки з залежною фіксацією

Кнопки з залежною фіксацією схожі на прапорці за винятком того, що, якщо кілька кнопок використовують один і той же ім'я керуючого елемента , вони є взаємовиключними: якщо одна кнопка включена, інші обов'язково вимкнені. Для створення кнопок із залежною фіксацією використовується елемент INPUT .

меню

Надають користувачам варіанти на вибір. Меню створюється за допомогою елементу SELECT , а також елементів OPTGROUP і OPTION .

текстовий введення

Для введення тексту користувачем автори можуть створювати керуючі елементи двох типів. Елемент INPUT створює керуючий елемент для введення тексту з одного рядка, а елемент TEXTAREA - елемент для введення тексту з декількох рядків. В обох випадках вводиться текст стає поточним значенням керуючого елемента.

вибір файлів

Керуючі елементи цього типу дозволяють користувачам вибирати файли, вміст яких може передаватися разом з формою. Для створення цього керуючого елемента використовується елемент INPUT .

приховані керуючі елементи

Автори можуть створювати керуючі елементи, які не подаються користувачам, але мають значення, які передаються з формою. Зазвичай вони використовуються для зберігання інформації між обміном клієнт / сервер, яка в іншому випадку могла б прірву внаслідок stateless природи протоколу HTTP (див. [RFC2068] ). Для створення прихованого керуючого елемента використовується елемент INPUT .

об'єкти

Автори можуть поміщати в форми загальні об'єкти, так що пов'язані з ними значення будуть передаватися з іншими керуючими елементами. Для створення таких керуючих елементів використовується елемент OBJECT .

Елементи, які використовуються для створення керуючих елементів, зазвичай розташовуються в елементі FORM , але можуть перебувати і за межами оголошення FORM , якщо вони використовуються для побудови інтерфейсу користувача. Це обговорюється в розділі про внутрішні події. Зверніть увагу, що керуючі елементи за межами форми не можуть бути успішними .

17.3 Елемент FORM

  <! ELEMENT FORM - - ( % block; | SCRIPT) + - (FORM) - інтерактивна форма ->
 <! ATTLIST FORM
  % attrs;
  - % Coreattrs , % i18n , % events -
  action % URI;
  #REQUIRED - Обробник форми на сервері -
  method (GET | POST) GET - метод HTTP, який використовується для відправки форми--
  enctype % ContentType;
  "Application / x-www-form-urlencoded"
  onsubmit % Script;
  #IMPLIED - Форма відправлена ​​-
  onreset % Script;
  #IMPLIED - Форма скинута -
  accept-charset % Charsets;
  #IMPLIED - Список підтримуваних наборів символів -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Елемент FORM служить контейнерів для керуючих елементів . Він визначає:

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

Форма крім керуючих елементів може містити текст і розмітку (абзаци, списки і т.д.).

  <FORM action = "http://somesite.com/prog/adduser" method = "post">
  ... вміст форми ...

  </ FORM>

  <FORM action = "mailto: [email protected]" 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 #IMPLIED - передати як частина форми - value CDATA #IMPLIED - обов'язковий для кнопок із залежною фіксацією і прапорців - checked (встановлений) #IMPLIED - для кнопок із залежною фіксацією і прапорців - disabled (відключений) #IMPLIED - в даному контексті недоступний - readonly (тільки читання) #IMPLIED - для тексту і паролів - size CDATA #IMPLIED - залежить від типу поля - maxlength NUMBER #IMPLIED - максимальне число символів в текстовому полі - src % URI;
  #IMPLIED - Для полів із зображеннями - alt CDATA #IMPLIED - короткий опис - usemap % URI;
  #IMPLIED - Використовувати клієнтську навігаційну карту - tabindex NUMBER #IMPLIED - позиція в послідовності переходу - accesskey % Character;
  #IMPLIED - Клавіша доступу - onfocus % Script;
  #IMPLIED - Фокус на цьому елементі - onblur % Script;
  #IMPLIED - Фокус переміщений на інший елемент - onselect % Script;
  #IMPLIED - Виділений деякі текст - onchange % Script;
  #IMPLIED - Значення елемента змінено - accept % ContentTypes;
  #IMPLIED - Список типів MIME для завантаження файлів -> 

Початковий тег: обов'язковий, Кінцевий тег: заборонений

17.4.1 Типи керуючих елементів, що створюються за допомогою елемента 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 в якості вихідного імені файлу.

17.4.2 Приклади форм з керуючими елементами типу INPUT

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

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

 <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)
  - Кнопка ->
 <! ATTLIST BUTTON
  % attrs;
  - % Coreattrs , % i18n , % events -
  name CDATA #IMPLIED
  value CDATA #IMPLIED - передається на сервер при відправці -
  type (button | submit | reset) submit - для використання в якості кнопки в формі -
  disabled (disabled) #IMPLIED - в даному контексті недоступно -
  tabindex NUMBER #IMPLIED - положення в послідовності перехода--
  accesskey % Character;
  #IMPLIED - Клавіша доступу -
  onfocus % Script;
  #IMPLIED - Фокус на елементі -
  onblur % Script;
  #IMPLIED - Фокус переміщений на інший елемент -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Кнопки, що створюються за допомогою елемента BUTTON , діють так само, як і кнопки, що створюються за допомогою елемента INPUT , але вони забезпечують більш багаті можливості подання: елемент BUTTON може мати вміст. Наприклад, елемент BUTTON , що містить зображення, діє і може resemble подібно елементу INPUT , для атрибута type якого встановлено значення "image", але тип елемента BUTTON може мати вміст content.

Візуальні агенти користувачів можуть представляти кнопки BUTTON рельєфно або з ефектом натискання при натисканні миші, в той час як кнопки INPUT можуть представлятися тільки як "плоскі" зображення.

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

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

17.6 Елементи SELECT , OPTGROUP і OPTION

  <! ELEMENT SELECT - - (OPTGROUP | OPTION) + - option selector ->
 <! ATTLIST SELECT
  % attrs;
  - % Coreattrs , % i18n , % events -
  name CDATA #IMPLIED - ім'я поля -
  size NUMBER #IMPLIED - число видимих рядків -
  multiple (multiple) #IMPLIED - за замовчуванням використовується одне виділення -
  disabled (disabled) #IMPLIED - недоступно в даному контексті -
  tabindex NUMBER #IMPLIED - позиція в послідовності переходу -
  onfocus % Script;
  #IMPLIED - Фокус перейшов на елемент -
  onblur % Script;
  #IMPLIED - Фокус пішов з елемента -
  onchange % Script;
  #IMPLIED - Значення елемента змінилося -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Елемент 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 . Агенти користувачів можуть по-різному обробляти цю помилку, але не повинні заздалегідь вибирати більше одного варіанту.

  <! ELEMENT OPTGROUP - - (OPTION) + - група варіантів ->
 <! ATTLIST OPTGROUP
  % attrs;
  - % Coreattrs , % i18n , % events -
  disabled (disabled) #IMPLIED - недоступно в даному контексті -
  label % Text;
  #REQUIRED - Використання в ієрархічних меню -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

  <! ELEMENT OPTION - O (#PCDATA) - варіант вибору ->
 <! ATTLIST OPTION
  % attrs;
  - % Coreattrs , % i18n , % events -
  selected (selected) #IMPLIED
  disabled (disabled) #IMPLIED - недоступно в даному контексті -
  label % Text;
  #IMPLIED - Використовується в ієрархічних меню -
  value CDATA #IMPLIED - за замовчуванням - вміст елемента -
  >

Початковий тег: обов'язковий, Кінцевий тег: optional

При поданні пункту меню агенти користувачів повинні використовувати значення атрибуту label елемента OPTION як вибору. Якщо цей атрибут не визначений, агенти користувачів повинні використовувати вміст елемента OPTION .

Атрибут label елемента OPTGROUP визначає мітку групи варіантів.

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

  <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

17.7 Елемент TEXTAREA

  <! ELEMENT TEXTAREA - - (#PCDATA) - текстове поле з кількох рядків ->
 <! ATTLIST TEXTAREA
  % attrs;
  - % Coreattrs , % i18n , % events -
  name CDATA #IMPLIED
  rows NUMBER #REQUIRED
  cols NUMBER #REQUIRED
  disabled (disabled) #IMPLIED - недоступно в даному контексті -
  readonly (readonly) #IMPLIED
  tabindex NUMBER #IMPLIED - позиція в послідовності переходу -
  accesskey % Character;
  #IMPLIED - Клавіша доступу -
  onfocus % Script;
  #IMPLIED - Фокус перейшов до елементу -
  onblur % Script;
  #IMPLIED - Фокус переведений на інший елемент -
  onselect % Script;
  #IMPLIED - Виділений деякий текст -
  onchange % Script;
  #IMPLIED - Значення елемента змінилося -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Елемент 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>

17.8 Елемент ISINDEX

ISINDEX є небажаним . Цей елемент створює керуючий елемент для введення тексту з одного рядка. Авторам слід використовувати для створення керуючих елементів для введення тексту елемент INPUT .

Формальне визначення см. В Transitional DTD .

Елемент ISINDEX створює керуючий елемент для введення тексту з одного рядка, в який можна ввести будь-яке число сімвлов. Агенти користувачів можуть використовувати значення атрибуту prompt в якості запиту.

  <ISINDEX prompt = "Введіть фразу для пошуку:">

  <FORM action = "..." method = "post">
 <P> Введіть фразу для пошуку: <INPUT type = "text"> </ P>
 </ FORM>

17.9 Мітки

З деякими керуючими елементами форми можуть автоматично зв'язуватися мітки (наприклад, з кнопками), з іншими елементами позначки не зв'язуються (текстові поля, прапорці і кнопки з залежною фіксацією і меню).

Для керуючих елементів з неявними мітками агенти користувачів повинні використовувати в якості мітки значення атрибута value.

Елемент LABEL використовується для завдання міток для керуючих елементів, що не мають неявних міток.

17.9.1 Елемент LABEL

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

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Елемент 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>

  <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 переходить фокус , то він передається в пов'язаний керуючий елемент. Приклади див. Нижче в розділі про клавішах доступу .

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

17.10 Додавання в форми структури: елементи FIELDSET і LEGEND

  <! -
  #PCDATA Використовується для вирішення проблеми змішаного вмісту,
  per specification only whitespace is allowed there!
  ->
 <! ELEMENT FIELDSET - - (# PCDATA, LEGEND, ( % flow; ) *) - група керуючих елементів форми ->
 <! ATTLIST FIELDSET
  % attrs;
  - % Coreattrs , % i18n , % events -
  >
 <! ELEMENT LEGEND - - ( % inline; ) * - legend набору полів ->
 <! ENTITY% LAlign "(top | bottom | left | right)">
 <! ATTLIST LEGEND
  % attrs;
  - % Coreattrs , % i18n , % events -
  accesskey % Character;
  #IMPLIED - Клавіша доступу -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Елемент 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>

17.11 Перехід фокуса на елемент

У документі HTML, щоб стати активним і виконати свої завдання, елемент повинен отримати фокус від користувача. Наприклад, користувачі повинні активізувати посилання, що задається елементом A , щоб перейти до пов'язаного з документом. Точно так же користувачі повинні перевести фокус на елемент TEXTAREA , щоб в нього можна було вводити текст.

Є кілька способів передачі фокусу елементу:

• Вказати елемент за допомогою вказівного пристрою.
• Перейти з одного елемента на інший за допомогою клавіатури. Автор документа може визначити послідовність переходу, що визначає порядок отримання елементами фокуса при переході користувача по документу за допомогою клавіатури (див. Перехід по клавіші tab ). Обраний елемент можна активізувати за допомогою іншої послідовності клавіш.
• Вибрати елемент за допомогою клавіші доступу (іноді називається "клавіатурним скороченням").

17.11.1 Перехід за допомогою клавіші Tab

Послідовність переходу визначає порядок отримання фокусу елементами при переході за допомогою клавіатури. Послідовність переходу може включати елементи, вкладені в інші елементи.

Перехід до елементів, які можуть отримувати фокус, повинен здійснюватися агентами користувачів відповідно до наступних правил:

1. Перехід до елементів, які підтримують атрибут tabindex , якому призначено позитивне значення, повинен здійснюватися в першу чергу. Перехід здійснюється від елементів з найменшим значенням атрибута tabindex до елементів з найвищим значенням. Значення не обов'язково повинні бути послідовними і не обов'язково повинні починатися з якогось конкретного значення. Перехід до елементів з однаковими значеннями атрибута tabindex повинен здійснюватися в порядку їх знаходження в потоці символів.
2. Перехід до елементів, що не підтримують атрибут tabindex або елементів, у яких значенням цього атрибуту є "0", виконується в наступну чергу. Перехід до цих елементів проводиться в порядку їх знаходження в потоці символів.
3. Відключені елементи не беруть участі в послідовності переходу.

Наступні елементи підтримують атрибут tabindex : A , AREA , BUTTON , INPUT , OBJECT , SELECT і TEXTAREA .

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> Документ з тегом FORM </ TITLE>
 </ HEAD>
 <BODY>
 ... деякий текст ... <P> Відвідайте
 <A Tabindex="10" href="http://www.w3.org/"> сайт W3C. </A>
 ... ще текст ... <BUTTON type = "button" name = "get-database"
  tabindex = "1" onclick = "get-database">
 Поточна база даних.
 </ BUTTON>
 ... ще текст ...

 <FORM action = "..." method = "post">
 <P>
 <INPUT tabindex = "1" type = "text" name = "field1">
 <INPUT tabindex = "2" type = "text" name = "field2">
 <INPUT tabindex = "3" type = "submit" name = "submit">
 </ P>
 </ FORM>
 </ BODY>
 </ HTML>

17.11.2 Клавіші доступу

Натискання призначеної елементу клавіші доступу передає елементу фокус. Дія, що відбувається після отримання елементом фокусу, залежить від елемента. Наприклад, якщо пользвоатель активізує посилання, яка визначається елементом A , агент користувача зазвичай виробляє перехід по посиланню. Якщо користувач активізує кнопку з залежною фіксацією, агент користувача змінює значення кнопки. Якщо користувач активізує текстове поле, в нього дозволяється введення і т.д.

Наступні елементи підтримують атрибут accesskey : A , AREA , BUTTON , INPUT , LABEL , LEGEND і TEXTAREA .

 <FORM action = "..." method = "post">
 <P>
 <LABEL for = "fuser" accesskey = "U">
 User Name
 </ LABEL>
 <INPUT type = "text" name = "user" id = "fuser">
 </ P>
 </ FORM>

  <P> <A accesskey = "C" 
  rel = "contents"
  href = "http://someplace.com/specification/contents.html">
  Зміст </A>

Використання клавіші доступу залежить від системи. Наприклад, на машинах під управлінням MS Windows зазвичай разом з клавішею доступу потрібно натискати клавішу "alt". У системах Apple зазвичай потрібно натискання клавіші "cmd".

Подання клавіші доступу залежить від агента користувача. Авторам рекомендується включати клавіші доступу в текст мітки або туди, де застосовується клавіша доступу. Агенти користувачів повинні представляти значення клавіші доступу таким чином, щоб підкреслити її роль і дати відрізнити її від інших символів (наприклад, за допомогою підкреслення).

17.12 Відключені керуючі елементи і елементи тільки для читання

У контекстах, де введення користувача небажаний або не потрібно, важлива можливість відключення керуючого елемента або подання його тільки для читання. Наприклад, можна відключити кнопку відправки форми до введення деяких обов'язкових даних. Аналогічно, автор може включити текст тільки для читання, який повинен передаватися з формою як значення. У наступних розділах описуються відключені керуючі елементи і елементи тільки для читання.

17.12.1 Відключені керуючі елементи

Якщо атрибут disabled встановлено, він впливає на елемент наступним чином:

• До відключеним елементам не переходить фокус .
• Відключені елементи не беруть участі в переході по клавіші tab .
• Відключені керуючі елементи не можуть бути успішними .

Атрибут disabled підтримують наступні елементи: BUTTON INPUT , OPTGROUP , OPTION , SELECT і TEXTAREA .

Цей атрибут успадковується, але локальні оголошення мають пріоритет над спадкоємною значенням.

Подання відключених елементів залежить від агента користувача. Наприклад, деякі агенти користувачів "виділяють сірим" відключені пункти меню, мітки кнопок і т.д.

 <INPUT disabled name = "fred" value = "stone">

17.12.2 Елементи, що управляють тільки для читання

Атрибут readonly визначає, чи може користувач змінювати вміст керуючого елемента.

Якщо атрибут readonly встановлено, він впливає на елемент наступним чином:

• До елементів тільки для читання переходить фокус , але користувач не може змінювати їх.
• Елементи тільки для читання входять в послідовність переходу .
• Елементи тільки для читання можуть бути успішними .

Атрибут readonly підтримують наступні елементи: INPUT , TEXT, PASSWORD і TEXTAREA .

Подання елементів тільки для читання залежить від агента користувача.

17.13 Відправлення форми

У наступних розділах пояснюється передача даних форми агентами користувачів агентам обробки форм.

17.13.1 Метод відправки форми

Атрибут method елемента FORM визначає метод HTTP, який використовується для відправки форми в агент обробки. Цей атрибут може приймати два значення:

• get: З використанням методу HTTP "get" набір даних форми додається до URI, вказаною в атрибуті action , і цей новий URI відправляється в агент обробки.
• post: З використанням методу HTTP "post" набір даних форми включається в тіло форми і відправляється в агент обробки.

Метод "get" слід використовувати, якщо форма is idempotent (тобто не викликає побічних ефектів). Велике число операцій пошуку в базі даних не має видимих ​​побічних ефектів і являє собою ідеальне додаток для методу "get".

Якщо обслуговування, пов'язане з обробкою форми, викликає побічні ефекти (наприклад, якщо форма змінює базу даних або виробляє підписку н послуги), слід використовувати метод "post".

17.13.2 Успішні керуючі елементи

Успішний керівник елемент "підходить" для відправки. Кожен успішний керуючий елемент має ім'я і поточне значення ; ця пара є частиною переданого набору даних форми . Успішний керівник елемент повинен визначатися в елементі FORM і повинен мати ім'я.

Однак:

• Відключені керуючі елементи не можуть бути успішними.
• Якщо в формі міститься кілька кнопок відправки , успішною є тільки активізована кнопка.
• Успішними можуть бути всі "включені" прапорці .
• Для кнопок із залежною фіксацією з одним і тим же значенням атрибута name , успішною може бути тільки "включена" кнопка.
• Для меню ім'я керуючого елемента задається елементом SELECT , а значення - елементами OPTION . Успішними можуть бути тільки вибрані пункти.
• Поточне значення елемента вибору файлів є список з одного або декількох імен файлів. Після відправки форми вміст кожного файлу передається з іншими даними форми. Вміст файлу упаковується відповідно до типом вмісту форми.
• Поточне значення керуючого елемента об'єкта визначається реалізацією об'єкта.

Якщо керуючий елемент не має поточного значення під час відправки форми, агенти користувачів не обов'язково повинні обробляти його як успішний.

Більш того, агенти користувачів не повинні вважати успішними наступні керуючі елементи:

• Кнопку скидання.
• Елементи OBJECT , у яких встановлено атрибут declare .

Приховані керуючі елементи і керуючі елементи, які не подаються завдяки таблицями стилів можуть бути успішними. наприклад:

  <FORM action = "..." method = "post">
 <P>
 <INPUT type = "password" style = "display: none" 
  name = "invisible-password"
  value = "mypassword">
 </ FORM>

17.13.3 Обробка даних форми

Коли користувач відправляє форму (наприклад, активізувавши кнопку відправки ), агент користувача обробляє її в такий спосіб.

Перший крок: Визначення успішних керуючих елементів  

Другий крок: Побудова набору даних форми  

Набір даних форми - це послідовність пар ім'я / значення , який складають з успішних керуючих елементів

Третій крок: Кодування набору даних форми  

Потім набір даних форми кодується відповідно до типом вмісту , що визначається атрибутом enctype елемента FORM .

Четвертий крок: Передача закодованого набору даних форми  

Нарешті, закодовані дані відправляються обробляє агенту, що призначається атрибутом action , по протоколу, зазначеного в атрибуті method .

В даній специфікації не визначаються всі допустимі способи відправки або типи вмісту , які можуть використовуватися з формами. Однак агенти користувачів HTML 4.0 повинні підтримувати встановлені угоди в наступних випадках:

• Якщо для атрибута method встановлено значення "get", а для атрибута action вказано HTTP URI, агент користувача приймає значення атрибута action , додає до нього `? ' , Потім додає набір даних форми , закодований з використанням типу вмісту "application / x-www-form-urlencoded". Потім агент користувача переходить за посиланням на цей URI. У цьому сценарії дані форми обмежуються кодами ASCII.
• Якщо для атрибута method встановлено значення "post", а для атрибута action - HTTP URI, агент користувача виконує транзакцію HTTP "post" з використанням значення атрибута action і повідомлення, створеного відповідно до типом вмісту , зазначеним в атрибуті enctype attribute.

Для інших значень атрибута action або method поведінка не визначено.

Агенти користувачів повинні представляти відповідь на транзакції HTTP "get" і "post".

17.13.4 Типи вмісту форми

Атрибут enctype елемента FORM визначає тип вмісту , який використовується для кодування набору даних форми для передачі на сервер. Агенти користувачів повинні підтримувати перераховані нижче типи вмісту. Поведінка для інших типів вмісту не визначено.

Див. Також розділ про використання амперсандів в значеннях атрибутів URI .

application / x-www-form-urlencoded  

Цей тип вмісту використовується за умовчанням. Форми, що передаються з цим типом вмісту, повинні бути закодовані в такий спосіб:

1. Імена та значення керуючих елементів are escaped. Не відображаються символи замінюються `+ ', після чого зарезервовані символи are escaped, як описано в [RFC1738] , розділ 2.2: ньоарифметичне символи замінюються`% HH', знаком відсотків з подальшими шестнадцатерічнимі цифрами, що представляють ASCII-код символу. Розриви рядків представляються парами "CR LF" (тобто `% 0D% 0A ').
2. Імена / значення керуючих елементів перераховуються в тому порядку, в якому вони відображаються в документі. Ім'я відокремлюється від значення за допомогою символу `= ', а пари ім'я / значення відділяються одна від одної символом` &'.

multipart / form-data  

Тип "application / x-www-form-urlencoded" неефективний для відправки великої кількості двійкових даних або тексту, що містить символи, що не входять в набір ASCII. Тип "multipart / form-data" слід використовувати для відправки форм, що містять файли, дані, що не входять в набір ASCII і виконавчі дані.

У вмісті "multipart / form-data" використовуються правила всіх складових потоків даних MIME, як описано в [RFC2045] . Визначення типу "multipart / form-data" можна знайти в реєстрі [IANA] .

Повідомлення типу "multipart / form-data" складається з декількох частин, кожна з яких представляє успішний керуючий елемент . Частини відправляються обробляє агенту в тому порядку, в якому відповідні керуючі елементи представлені в потоці документа. Межі частин не повинні перебувати в даних; забезпечення цієї вимоги лежить поза області, що розглядається в даній специфікації.

Як і у всіх складових типах MIME, кожна частина має необов'язковий заголовок "Content-Type", для якого за замовчуванням встановлюється значення "text / plain". Агенти користувачів повинні надавати заголовок "Content-Type" з параметром "charset".

Кожна частина повинна містити:

1. заголовок "Content-Disposition", що має значення "form-data".
2. атрибут іменування, що визначає ім'я відповідного керуючого елемента. Імена керуючих елементів, спочатку закодовані з використанням наборів символів , відмінних від ASCII, можуть кодуватися за допомогою методу, описаного в [RFC2045] .

Наприклад, для керуючого елемента з ім'ям "mycontrol" відповідна частина може виглядати так:

  Content-Disposition: form-data;  name = "mycontrol"

Як і у всіх процесах передачі даних MIME, для поділу рядків даних використовується комбінація "CR LF" (тобто `% 0D% 0A ').

Може кодуватися кожна частина із зазначенням заголовка "Content-Transfer-Encoding", якщо значення цієї частини не відповідає кодуванні за замовчуванням (7BIT) (див. [RFC2045] , розділ 6)

Якщо вміст файлу передається з формою, файловий ввід повинен визначатися відповідним типом вмісту (наприклад, "application / octet-stream"). Якщо в результаті одного елемента форми повинні бути повернуті кілька файлів, вони повинні повертатися як тип "multipart / mixed", запроваджений в "multipart / form-data".

Агент користувача повинен спробувати вказати ім'я для кожного переданого файлу. Файл може вказуватися в параметрі "filename" заголовка 'Content-Disposition: form-data' або, в разі декількох полів, в заголовку 'Content-Disposition: file' складової частини. Якщо ім'я файлу клієнтської операційної системи містить символи, що не входять в набір US-ASCII, ім'я файлу може змінюватися або кодуватися з використанням методу [RFC2045] . Це зручно у випадках, коли, наприклад, вивантажені файли можуть містити посилання один на одного (наприклад, файл TeX і його допоміжне опис стилів ".sty").

У наступному прикладі показана кодування "multipart / form-data". Припустимо, у нас є такий форма:

  <FORM action = "http: //server.dom/cgi/handle"
  enctype = "multipart / form-data"
  method = "post">
  <P>
  Як вас звати?  <INPUT type = "text" name = "submit-name"> <BR>
  Які файли Ви відправляєте?  <INPUT type = "file" name = "files"> <BR>
  <INPUT type = "submit" value = "Відправити"> <INPUT type = "reset">
  </ FORM>

Якщо користувач введе в текстове поле слово "Larry" і вибере текстовий файл "file1.txt", агент користувача може відправити наступні дані:

  Content-Type: multipart / form-data;  boundary = AaB03x
  --AaB03x
  Content-Disposition: form-data;  name = "submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data;  name = "files";  filename = "file1.txt"
  Content-Type: text / plain
  ... Вміст файлу file1.txt ...
  --AaB03x--

Якщо користувач вибрав другий файл (зображення) "file2.gif", агент користувача може сконструювати частини наступним чином:

  Content-Type: multipart / form-data;  boundary = AaB03x
  --AaB03x
  Content-Disposition: form-data;  name = "submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data;  name = "files"
  Content-Type: multipart / mixed;  boundary = BbC04y
  --BbC04y
  Content-Disposition: attachment;  filename = "file1.txt"
  Content-Type: text / plain
  ... Вміст файлу file1.txt ...
  --BbC04y
  Content-Disposition: attachment;  filename = "file2.gif"
  Content-Type: image / gif
  Content-Transfer-Encoding: binary
  ... Вміст файлу file2.gif ...
  --BbC04y--
  --AaB03x--