form は HTML の属性で、フォーム関連要素を、同じ文書内の<form> 要素に関連付けます。この属性は、<button>、<fieldset>、<input>、<object>、<output>、<select>、<textarea> の各要素に適用されます。

値

この要素を関連付ける<form> 要素のid 属性値。

使用上のメモ

既定では、フォームコントロールは最も近い祖先の<form> 要素に関連付けられます。一方、<form> 内に含まれていないフォームコントロールは、どのフォームにも関連付けられません。form 属性を使用すると、これらの既定の動作を上書きできます。

form 属性を指定することで、<button>、<fieldset>、<input>、<object>、<output>、<select>、<textarea> の各要素に明示的にフォームオーナーを指定することができます。これにより、 あるフォームコントロールを、同じ文書内の任意の場所に配置された<form> 要素に関連付けられた状態にすることができます。

フォームが送信されると、<form> 要素に関連付けられたコントロールの名前と値が送信されます。これらは物理的にその<form> 内に含まれていなくても、また別の<form> 内に含まれていても、送信対象となります。

コントロールのform 属性は、そのコントロールを関連付けたい<form> 要素のid を値として取ります。それ以外の値をform 属性に設定してもすべて無視されます。

属性値を最も近い祖先<form> のid に設定することは必須ではありませんが、あるフォームコントロールとその最も近い祖先フォームとの関連を明示的に定義することで、スクリプトや不正な HTML によってその特定の<form> がコントロールの最も近い祖先フォームでなくなった場合でも、フォームコントロールがフォームから切り離されることがないよう にします。

祖先ではないフォームとの関連付け

form 属性を使用することで、ある<form> に含まれたフォームコントロールを別の<form> と関連付けられます。

このサンプルコードでは、ユーザー名の<input> はinternalForm 内に含まれていますが、form 属性によって、このコントロールは含まれている祖先フォームから切り離され、代わりにexternalForm に関連付けられています。

<form></form><form>  <label for="username">ユーザー名:</label>  <input form="externalForm" type="text" name="username" /></form>

この場合、externalForm が送信されたときにユーザー名が送信されますが、internalForm には関連付けられたフォームコントロールは存在しません。

form 属性は継承されない

form 属性は、それが設定された要素のみに関連付けます。この属性の動作は継承されません。例えば、<fieldset> 要素にform 属性が設定された場合、関連付けられるのは<fieldset> のみであり、その<fieldset>内に含まれるフォームコントロールは自動的には関連付けられません。

この例では、<fieldset> とusername の<input> はexampleForm に関連付けられており、HTMLFormControlsCollection のプロパティであるHTMLFormElement.elements に含まれていますが、password は含まれません。exampleForm が送信される際には、username のみが含まれます。

<form></form><fieldset form="exampleForm">  <legend>ログイン情報</legend>  <label    >ユーザー名: <input form="exampleForm" type="text" name="username"  /></label>  <label>パスワード: <input type="password" name="password" /></label></fieldset>

それぞれの入れ子要素は、自分自身でform 属性を持つか、フォーム内に含まれている必要があります。どの要素がフォームに関連付けられたかは、 JavaScript を使用してHTMLFormElement.elements で調べることができます。

フォーム送信

form 属性を設定しても、その要素がフォームと共に送信されるということではありません。送信可能な要素（<button>、<input>、<select>、<textarea> など）のみが、関連付けられた<form> が送信された際にその名前と値が送信されます。

この場合、たとえ<output> が暗黙的に、そして明示的にcalcForm に関連付けられたとしても、calcForm が送信される際にresult はa やb につけて送信されません。ただし、result はフォームのHTMLFormControlsCollection の一部です。

<form>  <label>1 つ目の数値: <input value="2" type="number" /></label>  <label>2 つ目の数値: <input value="3" type="number" /></label>  <label>合計: <output name="result" for="a b" form="calcForm">5</output></label></form>

例

基本的な例

この例では、明示的に<form> 要素内に含まれていなくても、form 属性を使用してフォーム関連要素を<form> 要素に関連付ける方法を示しています。この例では表示されるフォーム関連要素はすべて、暗黙的に（フォーム内に直接含まれていることで）または明示的に（form 属性を通じて）loginForm に関連付けられた状態にあります。ログインフォームが送信されると、それぞれの送信可能な要素の名前と値が記載されます。

<form>  <label>ユーザー名: <input type="text" name="username" /></label></form><label  >パスワード: <input form="loginForm" type="password" name="password"/></label><label>  選択してください:  <select form="loginForm" name="options">    <option value="A">A</option>    <option value="B">B</option>  </select></label><label  >説明:  <textarea form="loginForm" rows="4" name="description">Hello, World!</textarea  ></label><button form="loginForm" type="submit" name="submitLogin" value="Login">  送信</button>

異なるフォームに関連付けられた要素

この例では、<form> 要素がparentForm とtargetForm の 2 つがあります。parentForm 内の<button> は、form 属性がtargetForm に設定されており、最も近い祖先要素であるparentForm との関連付けを解除し、代わりにtargetForm に関連付けられています。送信ボタンが押されると、その祖先であるparentForm ではなく、targetForm が送信されます。

<form>  <input type="text" name="targetInput" /></form><form>  <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

関連情報

• 既定のフォームの動作の上書き