form 要素入力フォームを表す
form 要素は入力フォームを表します。入力コントロールを配置して、閲覧者が入力した情報などをサーバに送信することができます。
form 要素の仕様
- カテゴリ
- コンテンツモデル
-
ただし、form 要素を子孫に持つことはできません。
- この要素を使用できる文脈
フロー・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
accept-charset 属性
フォームがで送信可能な文字コードを指定します。半角スペースで区切って値を複数指定することができます。この場合、accept-charset="euc-jp utf-8" のように指定します。
action 属性
入力されたデータの送信先を指定します。サーバ側でデータを受け取るプログラムを指定するのが通常です。
autocomplete 属性
オートコンプリートの可否を指定します。下記の 2つの値が指定できます。
| 属性値 | 挙動 |
|---|---|
| on | オートコンプリートを行います （初期値） |
| off | オートコンプリートを行いません |
enctype 属性
フォームが送信するデータの形式を指定します。
| 属性値 | 挙動 |
|---|---|
| application/x-www-form-urlencoded | データは URL エンコードされて送信されます （初期値） |
| multipart/form-data | データはマルチパートデータとして送信されます |
| text/plain | データはプレーンテキストとして送信されます |
method 属性
データを送信する際の HTTP メソッドを指定します。method 属性には下記の属性値が指定できます。
| 属性値 | 挙動 |
|---|---|
| get | 送信されるデータは、action 属性で指定された URI にクエリ文字列 として付加された状態で送信されます （初期値） |
| post | 送信データは本文として送信されます。大きなデータを送信するのに向いています。通常、サーバ側のプログラムで受け取るデータはこの post メソッドを使用します |
name 属性
フォームに名前を付与します。空文字列は指定できません。また、同一文書内に同じ名前を持つ form 要素が存在してはいけません。JavaScript から参照する際などに利用しますが、現状であれば id 属性を使用するのが無難でしょう。
novalidate 属性
論理属性。この属性が指定された場合、フォーム送信の際のデータ検証を行いません。HTML5 では、入力コントロールに入力された内容を検証することが可能になりましたがこれを無効にします。
例えば入力必須 （required="required"） と指定された入力コントロールに入力がない状態でも途中保存のためのボタンを押すといった操作が可能になります。
target 属性
データ送信後の応答画面を表示する対象を指定します。
form 要素のサンプルソース
<form method="get" action="/search" role="search"> <fieldset> <legend accesskey="s">サイト内検索</legend> <input type="search" name="search" value="" placeholder="検索ワードを入力" /> <input type="submit" name="submit" value="検索" /> </fieldset> </form>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |