form атрибут HTML

Атрибут HTML form связывает элемент, связанный с формой, с элементом <form> в том же документе. Этот атрибут применяется к элементам <button>, <fieldset>, <input>, <object>, <output>, <select> и <textarea>.

Значения

id элемента <form>, с которым следует связать этот элемент.

Примечания по использованию

По умолчанию элементы управления формой связаны с ближайшим родительским элементом <form>, а элементы управления формой, не вложенные в <form>, не связаны ни с одной формой. Атрибут form позволяет переопределить это поведение по умолчанию.

Атрибут form элементов <button>, <fieldset>, <input>, <object>, <output>, <select> и <textarea> позволяет указать владельца формы, явно связывая элементы управления формой, расположенные в любом месте документа, с любым элементом <form> в том же документе.

При отправке формы отправляются имена и значения связанных с элементом <form> элементов управления, независимо от того, вложены ли они непосредственно в этот элемент <form> и даже если они вложены в другой элемент <form>.

Атрибут form элемента управления принимает в качестве значения id элемента <form>, с которым нужно связать элемент управления. Все остальные значения, заданные для атрибута form, игнорируются.

Хотя необязательно задавать в качестве значения атрибута id значение ближайшего родительского элемента <form>, явное указание связи между элементом управления формы и ближайшей родительской формой гарантирует, что элемент управления не потеряет связь с формой, если скрипты или некорректный HTML приведут к тому, что этот элемент <form> перестанет быть ближайшей родительской формой элемента управления.

Связь с формой, не являющейся родительским элементом

Атрибут form можно использовать, чтобы связать элемент управления формы, вложенный в один элемент <form>, с другим элементом <form>.

В этом примере кода поле имени пользователя <input> вложено в internalForm, но атрибут form отсоединяет элемент управления от родительской формы, в которую он вложен, и связывает его с externalForm:

<form id="externalForm"></form>
<form id="internalForm">
  <label for="username">Username:</label>
  <input form="externalForm" type="text" name="username" id="username" />
</form>

В этом случае имя пользователя будет отправлено вместе с externalForm, а у internalForm не будет связанных элементов управления формы.

Атрибут form не наследуется

Атрибут form связывает только тот элемент, для которого он задан. Поведение атрибута не наследуется. Например, когда атрибут form задан для элемента <fieldset>, он связывает только <fieldset> и не связывает автоматически элементы управления формы, вложенные в этот элемент <fieldset>.

В этом примере элементы <fieldset> и username <input> связаны с exampleForm и включены в HTMLFormControlsCollection свойства HTMLFormElement.elements, а password — нет. При отправке exampleForm будет включен только username:

<form id="exampleForm"></form>

<fieldset form="exampleForm">
  <legend>Login information</legend>
  <label
    >Username: <input form="exampleForm" type="text" name="username"
  /></label>
  <label>Password: <input type="password" name="password" /></label>
</fieldset>

Каждый вложенный элемент должен иметь собственный атрибут form или быть вложен в форму. Проверить, какие элементы связаны с формой, можно с помощью JavaScript и свойства HTMLFormElement.elements.

Отправка формы

Наличие атрибута form не означает, что элемент будет отправлен вместе с формой. При отправке связанного с ними элемента <form> отправляются имена и значения только элементов, допускающих отправку, включая <button>, <input>, <select> и <textarea>.

В этом случае, хотя <output> сначала неявно, а затем явно связан с calcForm, result не отправляется вместе с a и b при отправке calcForm. Однако он является частью HTMLFormControlsCollection формы.

<form id="calcForm">
  <label>First number: <input id="a" value="2" type="number" /></label>
  <label>Second number: <input id="b" value="3" type="number" /></label>
  <label>Sum: <output name="result" for="a b" form="calcForm">5</output></label>
</form>

Примеры

Базовый пример

В этом примере показано, как элементы, связанные с формой, можно связать с элементом <form> с помощью атрибута form, даже если они не вложены в него напрямую. Все показанные в примере элементы, связанные с формой, связаны с loginForm либо неявно (поскольку они вложены непосредственно в форму), либо явно с помощью атрибута form. При отправке формы входа будут переданы имена и значения всех элементов, допускающих отправку.

<form id="loginForm">
  <label>Username: <input type="text" name="username" /></label>
</form>

<label
  >Password: <input form="loginForm" type="password" name="password"
/></label>
<label>
  Choose an option:
  <select form="loginForm" name="options">
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
</label>
<label
  >Description:
  <textarea form="loginForm" rows="4" name="description">
Hello, World!</textarea
  >
</label>
<button form="loginForm" type="submit" name="submitLogin" value="Login">
  Submit
</button>

Элемент связан с другой формой

В этом примере есть два элемента <form>: parentForm и targetForm. У элемента <button> внутри parentForm атрибут form имеет значение targetForm, поэтому элемент отсоединяется от ближайшего родительского элемента parentForm и связывается с targetForm. При нажатии кнопки отправки отправляется targetForm, а не его родительский элемент parentForm.

<form id="targetForm">
  <input type="text" name="targetInput" />
</form>
<form id="parentForm">
  <button form="targetForm" type="submit" name="submitTarget" value="Target">
    Submit target form
  </button>
</form>

Спецификации

Совместимость с браузерами

html.elements.button.form

html.elements.fieldset.form

html.elements.input.form

html.elements.object.form

html.elements.output.form

html.elements.select.form

html.elements.textarea.form

См. также

• Переопределение поведения формы по умолчанию