Атрибут form тега <input> — поле поза формою

Атрибут form (HTML тега <input>) пов'язує поле з формою по її ідентифікатору. В якості значення повинен виступати ідентифікатор форми (id) в цьому ж документі.

Такий зв'язок необхіден в разі, коли поле розташовується за межами форми, наприклад, при створенні її програмно або з міркувань дизайну.

правити

Загальний опис

правити

Порада

Майте на увазі, якщо вказати ідентифікатор не існуючої форми, то дані поля не будуть відправлені.

автор: с3с правити

Нотатка

Якщо атрибут form не вказано, то елемент <input> повинен бути нащадком елемента <form>. Атрибут дозволяє розмістити елементи <input> в будь-якому місці документу, а не тільки в якості нащадка елемента <form>. Елемент <input> может бути пов'язаний тільки з однією формою.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<input form="form_id">

Атрибут form може отримувати єдине значення:

form_id

Ідентифікатор форми (значення атрибута id елемента <form>).

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Приклад використання атрибуту 'form'</p>
<form id="data"></form>
  <p><input placeholder="Ваше ім'я" name="user" form="data"></p>
<p><input placeholder="Прізвище" name="user" form="data"></p>
<p><input placeholder="Ваше повідомлення" name="user" form="data"></p>
  <p><input type="submit" value="Відправити форму" form="data"></p>

<form id="zamovlennia">
  <p><label>Ім'я: <input name="name" placeholder="наберіть щось"></label></p>
  <p><label>Місто: <input name="city" placeholder="і сюди теж"></label></p>
</form>

<p>Поле нижче лежить <b>поза</b> формою, але прив'язане до неї атрибутом <code>form</code>:</p>
<p><label>Коментар:<br>
  <textarea name="note" form="zamovlennia" rows="2" cols="30" placeholder="і сюди"></textarea></label></p>

<p>Обидві кнопки теж поза формою:</p>
<p>
  <button type="reset" form="zamovlennia">Очистити — з <code>form</code></button>
  <button type="reset">Очистити — без <code>form</code></button>
</p>

<p class="note">Друга кнопка не має форми-власника, тому натискання на неї нічого не робить.</p>

form { border: 1px solid #6a8; padding: 8px 12px; margin-bottom: 14px; }
p { margin: 0 0 12px; }
input, textarea, button { font: inherit; }
button { padding: 4px 10px; margin-right: 8px; }
code { background: #f2f2f2; padding: 0 3px; }
.note { border-left: 3px solid #c00; padding-left: 10px; color: #444; }