form - フォーム関連要素

フォーム要素のいくつかは、処理のためにサーバーにサブミットすることができる編集可能な値を表すことができます。

form要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
form

form要素のHTML4からHTML5への変更点

HTML5ではaccept属性が廃止され、autocomplete属性、novalidate属性が追加されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
accept-charset 送信するデータの文字エンコーディングを指定
・UTF-8
・Shift_JIS
・EUC-JP
など
action 送信先URLを指定
autocomplete オートコンプリートのオン/オフを指定
・on
・off
enctype 送信するデータの形式を指定
・application/x-www-form-urlencoded - URLエンコードして送信(デフォルト)
・multipart/form-data - マルチパートデータとして送信
・text/plain
method 送信方法を指定
・get
・post
name フォームの名前を指定
novalidate 入力データの妥当性を確認しない
target 送信するターゲット先を指定
・_blank - 名前のない新しいウインドウに表示
・_self - 現在のウインドウに表示
・_parent - フレーム内からのリンクの場合、フレーム設定文書(多くの場合、フレームを解除しウインドウ全体)に表示
・_top - フレーム内からのリンクの場合、フレームを解除し最上位ウインドウ全体に表示
・任意の名前 - リンク先を指定の名称を持つ新しいウィンドウひ表示

「POST送信」のサンプル

HTMLコード

<form action="" name="example" method="post">
<label>ID:<input type="text" name="id"></label>
<label>PASS:<input type="password" name="pass"></label>
<input type="submit" value="送信">
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「POST送信」のサンプルプレビューを確認

「GET送信」のサンプル

HTMLコード

<form action="" name="example" method="post">
<label>ID:<input type="text" name="id"></label>
<label>PASS:<input type="password" name="pass"></label>
<input type="submit" value="送信">
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「GET送信」のサンプルプレビューを確認

「GET送信」のサンプル

HTMLコード

<form action="" name="example" method="post" accept-charset="UTF-8" autocomplete="on" target="_self" novalidate="novalidate">
<label>E-MAIL:<input type="email" name="email"></label>
<label>URL:<input type="url" name="url"></label>
<input type="submit" value="送信">
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「GET送信」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/forms.html#the-form-element)