<form>
<form> は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
| HTML 属性 | ||||||
accept-charset | 1 | 12 | 1 | 3 | 18 | 2 |
action | 1 | 12 | 1 | 3 | 18 | 2 |
| HTML の autocomplete 属性により、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、user agentがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。 | 14 | 12 | 4 | 6 | 18 | 6 |
enctype | 1 | 12 | 1 | 3 | 18 | 2 |
method | 1 | 12 | 1 | 3 | 18 | 2 |
name | 1 | 12 | 1 | 3 | 18 | 2 |
novalidate | 10 | 12 | 4 | 10.1 | 18 | 10.3 |
| rel 属性は、リンク先のリソースと現在の文書との関係を定義します。 link、a、area、form で有効で、対応する値は属性が見つかった要素に依存します。 | 108 | 108 | 111 | 15.4 | 108 | 15.4 |
target | 1 | 12 | 1 | 3 | 18 | 2 |
| DOM API | ||||||
| FormDataEvent インターフェイスは formdata イベントを表します。 — このようなイベントは HTMLFormElement オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 FormData.FormData コンストラクターの呼び出しでも発行させることができます。 | 77 | 79 | 72 | 15 | 77 | 15 |
| formData は FormDataEvent インターフェイスの読み取り専用プロパティで、このイベントが発行された時点のフォームに含まれていたデータを表す FormData オブジェクトが入っています。 | 77 | 79 | 72 | 15 | 77 | 15 |
| FormDataEvent() コンストラクターは、新しい FormDataEvent オブジェクトインスタンスを生成します。 | 77 | 79 | 72 | 15 | 77 | 15 |
| HTMLFormControlsCollection インターフェイスは、HTML のフォームコントロール要素の集合を表すインターフェイスです。HTMLFormElement インターフェイスの HTMLFormElement.elements プロパティから返されます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormControlsCollection.namedItem() メソッドは、集合内の RadioNodeList または Element の name または id が指定した名前と一致するノード、または一致するノードがない場合は null を返します。 | 1 | 12 | 33 | 3 | 18 | 1 |
| HTMLFormElement インターフェイスは DOM 内の form 要素を表します。これは、フォームのコンポーネント要素へのアクセスだけでなく、フォームの様々な側面へのアクセスや、場合によっては変更を可能にします。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormElement.acceptCharset プロパティは、指定された form 要素で対応している文字エンコーディング の一覧を表します。このリストは、カンマ区切りまたはスペース区切りで記述することができます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormElement.action プロパティは、この form 要素のアクションを表します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| autocomplete は HTMLFormElement インターフェイスのプロパティで、ブラウザーによってこのフォームのコントロールの値が自動的に補完できるかどうかを示します。これは、form 要素の autocomplete 属性を反映します。 | 14 | 12 | 4 | 6 | 18 | 6 |
| HTMLFormElement の elements プロパティは、 HTMLFormControlsCollection で form 要素に含まれているすべてのフォームコントロールを列挙して返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormElement.encoding プロパティは、 DOM の HTMLFormElement オブジェクトの HTMLFormElement.enctype 要素の別名です。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormElement.enctype プロパティは、サーバーにフォームを送信するために使用されるコンテンツの MIME タイプを指定します。使用可能な値は以下の通りです。 | 1 | 12 | 1 | 3 | 18 | 1 |
| formdata イベントは、フォームのデータを表す項目リストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 FormData.FormData コンストラクターが呼び出されたときにも発行されます。 | 77 | 79 | 72 | 15 | 77 | 15 |
| HTMLFormElement.length は読み取り専用のプロパティで、 form 要素に含まれるコントロールの数を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormElement.method プロパティは、form を送信するために使用される HTTP メソッドを表します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFormElement.name プロパティは、現在の form 要素の名前を文字列で表します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| noValidate は HTMLFormElement インターフェイスのプロパティで、この form が送信された際に制約検証をバイパスするかどうかを示す論理値です。これは e要素の novalidate 属性を反映したもので、この属性が存在する場合は値は true となります。 | 4 | 12 | 4 | 5 | 18 | 4 |
| HTMLFormElement インターフェースの rel プロパティは rel 属性を反映します。これは、HTMLフォーム要素がどのようなリンクを作成するかを列挙した文字列で、スペースで区切られた値のリストとして格納されます。 | 108 | 108 | 111 | 15.4 | 108 | 15.4 |
| HTMLFormElementの読み取り専用のrelListプロパティは、フォーム要素で表されるリソースと現在のドキュメントとの関係を示すリンクタイプの集合を含むライブのDOMTokenListオブジェクトを返します。これは、form要素のrelコンテンツ属性を反映したものです。 | 108 | 108 | 111 | 15.4 | 108 | 15.4 |
| HTMLFormElement の requestSubmit() メソッドは、特定の送信ボタンでフォームを送信することをリクエストします。 | 76 | 79 | 75 | 16 | 76 | 16 |
| HTMLFormElement.reset() メソッドは、フォーム要素の既定値を復元します。このメソッドはフォームの コントロールをクリックするのと同じことを行います。 | 1 | 12 | 1 | 3 | 18 | 1 |
| reset イベントは form がリセットされたときに発行されます。 | 1 | 12 | 6 | 3 | 18 | 1 |
| HTMLFormElement.submit() メソッドは、このフォーム (form) を送信します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| submit イベントは form が送信されたときに発生します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| target は HTMLFormElement インターフェイスのプロパティで、このフォームのアクションのターゲット（すなわち、出力結果が描画されるフレーム）を表します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| SubmitEvent インターフェイスは、 HTML フォームの HTMLFormElement.submit_event イベントを表現するために使用されるオブジェクトを定義します。このイベントは、フォームの送信操作が呼び出されたときに form で発行されます。 | 81 | 81 | 75 | 15 | 81 | 15 |
| SubmitEvent() コンストラクターは、新しい SubmitEvent オブジェクトを作成して返します。これは HTML フォームで発行された HTMLFormElement.submit_event イベントを表現するために使用されます。 | 81 | 81 | 75 | 15 | 81 | 15 |
| submitter は SubmitEvent インターフェイスにある読み取り専用プロパティで、フォームを送信させるために呼び出された送信ボタンや他の要素を指定します。 | 81 | 81 | 75 | 15.4 | 81 | 15.4 |
- Google Chrome のオートコンプリート要求の UI は、フォームだけでなく `<input>` 要素の `autocomplete` 属性が `off` に設定されているかどうかによっても異なります。具体的には、フォームの `autocomplete` 属性が `off` に設定されていて、その `<input>` 要素の `autocomplete` 属性が設定されていない場合、ユーザーが `<input>` 要素のオートフィル候補を要求すると、Chrome は「このフォームではオートコンプリートは無効になっています」というメッセージを表示することがあります。一方、フォームとinput要素の両方で `autocomplete` が `off` に設定されている場合、ブラウザはそのようなメッセージを表示しません。このため、カスタムオートコンプリートを使用する各`<input>`に対して `autocomplete` を `off` に設定する必要があります。
- Chrome Android のオートコンプリートリクエストの UI は、フォームだけでなく `<input>` 要素の `autocomplete` 属性が `off` に設定されているかどうかによっても異なります。具体的には、フォームの `autocomplete` 属性が `off` に設定されていて、その `<input>` 要素の `autocomplete` 属性が設定されていない場合、ユーザーが `<input>` 要素のオートフィル候補を要求すると、Chrome Android は「このフォームではオートコンプリートは無効になっています」というメッセージを表示するかもしれません。一方、フォームと入力要素の両方で `autocomplete` が `off` に設定されている場合、ブラウザはそのメッセージを表示しません。このため、カスタムオートコンプリートを使用する各`<input>`に対して `autocomplete` を `off` に設定する必要があります。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (33)
- RadioNodeList`の代わりに`NodeList`を返すようにした。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (15.4)
- プロパティが `<button>` 要素に設定されていない。バグ 229660 を参照。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (15.4)
- プロパティが `<button>` 要素に設定されていない。バグ 229660 を参照。
基本構文
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>ライブデモ
実務での使いどころ
-
<form> の活用
<form> は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。