form 要素入力フォームを表す

form 要素は入力フォームを表します。入力コントロールを配置して、閲覧者が入力した情報などをサーバに送信することができます。

さらに詳細な説明を見る

サンプルソースを見る

form 要素の仕様

カテゴリ
コンテンツモデル

ただし、form 要素を子孫に持つことはできません。

この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
[OverrideBuiltins]
interface HTMLFormElement : HTMLElement {
           attribute DOMString acceptCharset;
           attribute DOMString action;
           attribute DOMString autocomplete;
           attribute DOMString enctype;
           attribute DOMString encoding;
           attribute DOMString method;
           attribute DOMString name;
           attribute boolean noValidate;
           attribute DOMString target;

  readonly attribute HTMLFormControlsCollection elements;
  readonly attribute long length;
  getter Element (unsigned long index);
  getter object (DOMString name);

  void submit();
  void reset();
  boolean checkValidity();
};

詳細説明

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>

W3C HTML5 仕様書

4.10.3 The form element