САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
Реклама на Schoolsw3

HTML Атрибут form



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

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


Применение

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

Элемент Атрибут
<button> form
<fieldset> form
<input> form
<label> form
<meter> form
<object> form
<output> form
<select> form
<textarea> form

Примеры

Пример Button

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

<form action="/action_page.php" method="get" id="form1">
 Имя: <input type="text" name="fname"><br>
 Фамилия: <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Отправить">Отправить</button>
Попробуйте сами »

Пример Fieldset

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

<form action="/action_page.php" method="get" id="form1">
 Какой ваш любимый цвет? <input type="text" name="fav_color"><br>
 <input type="submit">
</form>

<fieldset form="form1">
 Имя: <input type="text" name="username"><br>
 E-mail: <input type="text" name="usermail"><br>
</fieldset>
Попробуйте сами »

Пример Input

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

<form action="/action_page.php" id="form1">
 Имя: <input type="text" name="fname"><br>
 <input type="submit" value="Отправить">
</form>

Фамилия: <input type="text" name="lname" form="form1">
Попробуйте сами »

Пример Label

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

<form action="/action_page.php" id="form1">
  <input type="radio" name="gender" id="male" value="мужчина"><br>
  <label for="female">Женщина</label>
  <input type="radio" name="gender" id="female" value="женщина"><br>
  <label for="other">Другие</label>
  <input type="radio" name="gender" id="other" value="другие"><br><br>
  <input type="submit" value="Отправить">
</form>

<label for="male" form="form1">Мужчина</label>
Попробуйте сами »

Пример Meter

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

<form action="/action_page.php" method="get" id="form1">
 Имя: <input type="text" name="fname"><br>
 <input type="submit" value="Отправить">
</form>

<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter>
Попробуйте сами »

Пример Object

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

<form action="/action_page.php" id="form1">
 Имя: <input type="text" name="fname"><br>
 <input type="submit" value="Отправить">
</form>

<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object>
Попробуйте сами »

Пример Output

Элемент <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>
Попробуйте сами »

Пример Select

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

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

<select name="carlist" form="carform">
 <option value="вольво">Вольво</option>
 <option value="сааб">Сааб</option>
 <option value="opel">Опель</option>
 <option value="ауди">Ауди</option>
</select>
Попробуйте сами »

Пример Textarea

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

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

<textarea name="comment" form="usrform">Введите текст здесь...</textarea>
Попробуйте сами »

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

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

Элемент
button 10.0 Не поддерживает 4.0 5.1 9.5
fieldset Не поддерживает Не поддерживает Не поддерживает Не поддерживает Не поддерживает
input 9.0 Не поддерживает 4.0 5.1 10.6
label Да Да Да Да Да
meter Не поддерживает Не поддерживает Не поддерживает Не поддерживает Не поддерживает
object Не поддерживает Не поддерживает Не поддерживает Не поддерживает Не поддерживает
output Да Не поддерживает Да Да Да
select Да Не поддерживает Да Да Да
textarea Да Не поддерживает Да Да Да