form要素とは
<
要素は、<form>
要素には、action
属性を使って、フォームの送信先を指定します。なお、HTMLは、<form>
要素を使ってデータを送信することは可能ですが、受け取ることが出来ません。データの受取には、PHPやPerl、Rubyなどのサーバーサイドのプログラミング言語を使います。
- 意味・役割
- フォームを表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
- (HTML5より前:ブロックレベル要素)
- コンテンツ・モデル(梱包できる要素)
-
フロー・コンテンツ
ただし、子孫に<form>
要素は配置できない。
(HTML5より前:<form>
以外のブロックレベル要素、<script>
。インライン要素は非推奨) - この要素を配置できる親要素
- フロー・コンテンツが配置できる要素
form要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
action属性
属性は、フォームの送信先を指定する属性です。送信先は一般的に PHPなどのサーバーサイドのプログラムファイルになります。値を空にした場合や、この属性自体を省略した場合(HTML5から)は、自身にデータを送信します。なお、"mailto:メールアドレス" と指定すると、直接そのメールアドレスにデータを送信できますが、仕様上は定義されていないですし、文字化けも発生するので利用しないほうがいいでしょう。
<form action="空または、フォームデータ送信先のパス">
- 属性値
-
- 空 (自身にデータを送信)
- 送信先ファイルのパス
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<form action="conf.php">
method属性
属性は、
フォームの送信方法を指定する属性です。フォームの送信方法には "get"
と "post"
があります。"get"
は、URLの後ろにデータを付けて送信する方法で、そのデータを利用したページにリンクを貼ることも出来ます。そのことから、サイト内検索や、ページングなどに利用されます。"post"
は、HTTPリクエストのリクエストボディ部分(ブラウザがWEBサーバーにデータの送信先ファイルを要求する内容部分)にデータを付ける方法で、基本的には目に見えない部分でデータを送信します。そのことから、お問い合わせフォームや、ログインフォームなど、ユーザーの情報を送信するフォームに利用されます。
<form method="get または、post">
- 属性値
-
- "get": HTTP GETメソッド。データをURLの末尾に付加して送信 (初期値)
- "post": HTTP POSTメソッド。データをHTTPリクエストのリクエストボディに付加して送信
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<form method="post">
enctype属性
属性は、
method
属性に、"post" が指定されている時に、送信するデータのMIME Typeを指定する属性です。この属性はフォームのデータをWEBサーバが正しく解釈するための属性で、ファイルなどをフォームからアップロードする際は、"multipart/form-data" を指定する。
<form method="post" enctype="MIME Type">
- 属性値
-
"application/x-www-form-urlencoded"
: 「name属性の名前=value属性の値」の書式でURLエンコードされ送信される (初期値)"multipart/form-data"
: フォームからファイルを送信する場合に指定"text/plain"
: 変換されずに送信 (action
属性に "mailto:メールアドレス" を指定した際などに指定)
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<form enctype="multipart/form-data">
accept-charset属性
属性は、フォームに受け入れる文字コードを指定する属性です。複数指定することも可能で、その場合は 半角スペース で区切って指定します。(HTML5より前は、",(半角カンマ)"区切りでも指定できます。)
<form accept-charset="文字コード">
- 属性値
- 文字コード (複数指定する場合は、半角スペースで区切る)
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<form accept-charset="utf-8 euc-jp">
autocomplete属性 HTML5で追加
属性は、
<input>
要素に、ブラウザによる自動補完を利用するかを指定する属性です。ただし、現状(2017年1月現在)は、この属性で自動補完を "off" に指定してもブラウザによっては自動補完はされるものもあります。
<form autocomplete="onまたは、off">
- 属性値
-
"on"
: 以前の入力内容をもとに自動補完を ON にする"off"
: 自動補完を OFF にする
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form autocomplete="off">
novalidate属性 HTML5で追加
属性は、
フォームが送信された時に、入力内容の妥当性のチェックを無効にする属性です。
<form novalidate="novalidate">
- 属性値
-
"novalidate"
: 妥当性のチェックを無効にする - 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form novalidate="novalidate">
name属性
属性は、
フォームに名前を指定する属性です。他のフォームのname
属性と重複したり、空文字にすることはできません。なお、HTML4.01では推奨されておらず、XHTML1.0でも非推奨、XHTML1.1では廃止されているので注意が必要です。代わりに、id
属性を使いましょう。
<form name="フォームの名前">
- 属性値
- 文字列
- 利用できるバージョン(HTML4.01以降)
- HTML4.01、 XHTML1.0 (Transition/Frameset)、 HTML5 〜
<form name="contact">
target属性
属性は、
データを受け取るファイルを表示する場所を指定する属性です。属性値にはウインドウまたはタブの名前を指定するか、アンダースコアから始まる特別なキーワードが指定できます。
<form target="表示する場所">
- 属性値
- ウインドウまたはタブの名前または、以下のアンダースコアから始まる特別なキーワード
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)、 HTML5 〜
<form target="_blank">
accept属性 HTML5で廃止
属性は、
受け取るデータのMIME Typeを指定する属性です。複数指定する場合は ",(半角カンマ)"で区切って指定します。なお、この属性はHTML5で廃止されました。
<form accept="MIME Type">
- 属性値
- MIME Type
- 利用できるバージョン(HTML4.01以降)
- HTML4.01、 XHTML1.0、 XHTML1.1
<form method="post" accept="image/gif,image/jpeg,image/png">
form要素のサンプル
シンプルなお問い合わせフォームの例
<form action="" method="post">
<dl>
<dt><label for="your_name">お名前</label></dt>
<dd>
<input type="text" name="your_name" id="your_name">
</dd>
<dt><label for="your_email">メールアドレス</label></dt>
<dd>
<input type="email" name="your_email" id="your_email">
</dd>
<dt><label for="message">お問い合わせ内容</label></dt>
<dd>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
サイト内検索フォームの例
<form action="">
<div>
<label for="searchbox">サイト内検索</label>
<input type="search" name="s" id="searchbox" placeholder="検索キーワード">
<input type="submit" value="検索">
</div>
</form>
RERUN
ファイル送信フォームの例
ファイルを送信する際は、enctype
属性に "multipart/form-data" を指定する
<form action="" method="post" enctype="multipart/form-data">
<dl>
<dt>添付ファイル</dt>
<dd>
<input type="file" name="attachment">
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
仕様
- HTML5.1
- 4.10.3. The form element
- HTML5
- 4.10.3 The form element
- HTML4.01
- 17.3 The FORM element
関連する要素
<input>
要素<textarea>
要素<select>
要素<option>
要素<optgroup>
要素<button>
要素<label>
要素<fieldset>
要素<legend>
要素