<form></form>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ(ただし、form要素は含められない)

form要素は、入力フォームを作成します。この要素内には、フォームを構成する各部品を配置していくことになります。


<form></form>

属性
任意属性
action="" 送信先の指定 URL 送信先のURL
method="" HTTPメソッド get URLの形式でデータを送信 (初期値)
post 本文としてデータを送信
enctype="" 送信時のデータ形式 application/x-www-form-urlencoded URLエンコード (初期値)
multipart/form-data マルチパート
text/plain プレーンテキスト
accept-charset="" 送信時の文字エンコーディング エンコーディング名(UTF-8Shift_JISEUC-JP 等) 半角スペース区切りで複数指定可能
name="" フォームの名前 文字列 固有のフォーム名
target="" 送信結果の表示方法 _blank 新規のウィンドウに表示
_self 現在のウィンドウ(フレーム)に表示
_parent 親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示
ウィンドウ名、フレーム名 任意のウィンドウ(フレーム)に表示
autocomplete="" [+]オートコンプリート on オートコンプリートを有効にする (初期値)
off オートコンプリートを無効にする
novalidate [+]妥当性をチェックしない novalidate 値は省略可能

action属性method属性enctype属性target属性autocomplete属性novalidate属性の詳細については、下記のページを参考にしてください。

フォーム部品の配置について

通常、フォームを構成する各部品(入力欄や送信ボタン等)は、form要素の中に配置することになります。

  • 特別な理由がない場合は、この方法でフォームを作成することをお勧めします。
<form method="post" action="example.cgi">

<p>お名前:<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>

</form>

HTML5では、次の方法を使用することで、form要素の外にもフォーム部品を配置できるようになりました。

  1. form要素にid属性を指定します。
  2. フォーム部品にform属性を指定して、form要素に付けたID名を記述します。
<p>お名前:<input type="text" name="name" form="example"></p>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>

上記のように指定することで、form要素とフォーム部品とが関連付けられるようになります。

HTML5における主な変更点

HTML5のフォームでは、次のような新しい機能が追加されました。

  • form要素の外にもフォーム部品を配置できるようになりました。
  • 入力必須を指定できるようになりました。
  • 入力内容の書式を指定できるようになりました。
  • input要素のタイプが大幅に増えました。
  • ただし、上記の機能に対応していないブラウザもあるので(特に古いブラウザ)、重要なフォームを作成する場合には注意が必要です
HTML5における変更点
  • autocomplete属性とnovalidate属性が追加されました。
  • accept属性が廃止されました。
  • action属性が必須ではなくなりました。

使用例

主なフォーム部品
表示例

テキスト入力欄

パスワード入力欄

複数行の入力欄

ラジオボタン
その1 その2 その3
(1つだけ選択が可能)

チェックボックス
その1 その2 その3
(複数選択が可能)

プルダウンメニュー

ファイル選択

隠しデータ
(画面上には表示されません)

送信ボタン

リセットボタン

  • サンプルのため送信できません。
form要素の外に部品を配置した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。この機能に対応しているブラウザでは、送信ボタンを押すとアドレスバーのURLに ?name=EXAMPLE が追加されます。
  • Chrome、Safari、Firefox、Operaはこの機能に対応しているようです。

<p>お名前:<input type="text" name="name" value="EXAMPLE" form="example"></p>

<form method="get" action="form.html" id="example">
<p><input type="submit" value="送信する"></p>
</form>

表示例

お名前:

accept-charset属性を指定した例
  • エンコーディング名は、大文字と小文字は区別されません。
  • 通常、この指定は必要ありませんが、文字化けするような時には試してみると良いかもしれません。

<form method="post" action="example.cgi" accept-charset="UTF-8">

<p>お名前:<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>

</form>

表示例

お名前:

  • サンプルのため送信できません。
name属性を指定した例
  • フォームの名前は、スクリプトから参照する際に使用する場合があります。

<form method="post" action="example.cgi" name="example">

<p>お名前:<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>

</form>

表示例

お名前:

  • サンプルのため送信できません。