Атрибут формы HTML


Определение и использование

Атрибут formуказывает форму, которой принадлежит элемент.

Значение этого атрибута должно быть равно idатрибуту <form> элемента в том же документе.


Относится к

Атрибут formможно использовать для следующих элементов:

Элементы Атрибут
<кнопка> форма
<набор полей> форма
<ввод> форма
<метка> форма
<метр> форма
<объект> форма
<выход> форма
<выбрать> форма
<текстовое поле> форма

Примеры

Пример кнопки

Кнопка, расположенная вне формы (но все же часть формы):

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

Пример набора полей

Элемент <fieldset>, расположенный вне формы (но все же часть формы):

<form action="/action_page.php" method="get" id="form1">
  What is your favorite color? <input type="text" name="fav_color"><br>
  <input type="submit">
</form>

<fieldset form="form1">
  Name: <input type="text" name="username"><br>
  Email: <input type="text" name="usermail"><br>
</fieldset>

Пример ввода

Поле ввода, расположенное за пределами HTML-формы (но все же являющееся ее частью):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Пример этикетки

Элемент <label>, расположенный вне формы (но все же часть формы):

<form action="/action_page.php" id="form1">
  <input type="radio" id="html" name="fav_language" value="HTML"><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

<label for="html">HTML</label>

Пример счетчика

Элемент <meter>, расположенный вне формы (но все же часть формы):

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter>

Пример объекта

Элемент <object>, расположенный вне формы (но все же часть формы):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object>

Пример вывода

Элемент <output>, расположенный вне формы (но все же часть формы):

<form action="/action_page.php" id="numform"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" name="a" value="50">100
+<input type="number" id="b" name="b" value="50">
<br><br>
<input type="submit">
</form>

<output form="numform" name="x" for="a b"></output>

Выберите пример

Выпадающий список, расположенный вне формы (но все же являющийся ее частью):

<form action="/action_page.php" id="carform">
  Firstname:<input type="text" name="fname">
  <input type="submit">
</form>

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Пример текстовой области

Текстовая область, расположенная вне формы (но все же часть формы):

<form action="/action_page.php" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>

<textarea name="comment" form="usrform">Enter text here...</textarea>

Поддержка браузера

Атрибут formимеет следующую поддержку браузера для каждого элемента:

Element
button 10.0 Not supported 4.0 5.1 9.5
fieldset Not supported Not supported Not supported Not supported Not supported
input 9.0 Not supported 4.0 5.1 10.6
label Yes Yes Yes Yes Yes
meter Not supported Not supported Not supported Not supported Not supported
object Not supported Not supported Not supported Not supported Not supported
output Yes Not supported Yes Yes Yes
select Yes Not supported Yes Yes Yes
textarea Yes Not supported Yes Yes Yes