form要素
フォーム要素はフォーム部品(値を変更できる要素)を包むことができ、指定された値をサーバーなどに送信することが可能です。
<form action="http://www.google.com/search" method="get">
<label>Google: <input type="search" name="q"></label>
<input type="submit" value="Search...">
</form>form要素では以下の属性が利用できます。
accept-charset属性
accept-charset属性で送信する際の文字エンコーディングを指定することが可能です。
以下のように指定をするとShift-JISのHTMLドキュメントから送信したフォームデータもutf-8に変換されて送信されます。
<form action="/search/" accept-charset="utf-8">action属性
action属性で送信先のURLを指定できます。以下のようにform要素のURLを指定するとsubmit要素(type属性が”submit”のinput要素やbutton要素など)がクリックされた際にフォームの内容を指定されたURLに送信します。
<form action="/search/" accept-charset="utf-8">autocomplete属性
autocomplete属性でオートコンプリート機能(自動補完機能)を有効にするかどうかを指定できます。
デフォルトの値は”on”ですが”off”を指定することでオートコンプリート機能を無効化できます。
<form action="/search/" autocomplete="off">enctype属性
enctype属性でフォームの送信時のデータ形式を指定することができます。
値には以下の内容が指定できます。
| application/x-www-form-urlencoded | URLエンコード(初期値) |
|---|---|
| multipart/form-data | マルチパート(ファイルなどの情報を含む) |
| text/plain | プレインテキスト |
たとえば、次のように指定を行うとファイルなどの情報を含むマルチパート形式でフォームデータを送信します。
<form action="/search/" enctype="multipart/form-data">method属性
method属性でフォーム送信する際のHTTPメソッドを指定できます。
値には以下のキーワードが指定できます。値が省略されている場合はGETメソッドで送信で送信されます。
| get | GETメソッドで送信 |
|---|---|
| post | POSTメソッドで送信 |
| dialog | HTML5.1で追加された形式。 送信時にダイアログを表示し送信完了時にダイアログが閉じる |
<form action="/search/" method="post">name属性
name属性でform要素の名前をつけることができます。
<form action="/search/" name="form01">form要素の名前はHTML文章中でユニークな名前を付けなくてはいけません。
novalidate属性
novalidate属性を指定することで、入力データの妥当性はチェックせずに送信を行います。
<form action="/search/" novalidate="novalidate">target属性
target属性でフォームの送信先のウィンドウを指定することができます。
<form action="/search/" target="_blank">参考URL
4.10.3 The form element - HTML5 - W3C
4.10.3 The form element - HTML5.1 - W3C
登録日 : 2014年07月11日 最終更新日 : 2014年7月22日