form
<form> はサーバーに情報を送信するためのフォームを作成します。この要素内にボタンやプルダウンメニューなどの部品を配置して使用します。
- 分類
- フローコンテンツ、知覚可能コンテンツ
- 内包できるもの
- フローコンテンツ（<form> 以外）
属性
- accept-charset＝””
- サーバーへ送信するエンコーディング
- action
- 送信先 URL
- autocomplete
- 入力補完
- enctype
- 送信時の MIME タイプ
- method
- HTTP メソッド
- name
- フォームの名称
- novalidate
- 内容を検証しない
- target
- フォーム送信結果の表示方法
サーバーへ送信するエンコーディング
accept-charset=”” 属性でサーバーへ送信する際の文字エンコーディングを指定することができます。
<form accept-charset="UTF-8"></form>送信先 URL
action=”” 属性ではどの URL に対しフォームの情報を送信するかを指定します。
<form action="https://webmas.jp/form.php"></form>この属性は <button>, <input type=”submit”>, <input type=”image”> の formaction 属性を指定すると上書きされます。
入力補完
autocomplete=”” 属性は入力補完を有効にするか、無効にするかを指定できます。
有効の場合は “on” （既定値） ブラウザが以前入力された値を覚えている場合は、入力候補として表示します。
<form autocomplete="on"></form>無効の場合は “off” 以前入力した値があってもブラウザは入力候補を表示しません。
<form autocomplete="on"></form>送信時の MIME タイプ
enctype=”” 属性はフォームデータのエンコードを指定します。
- application/x-www-form-urlencoded
- 初期値
- multipart/form-data
- input 要素の type 属性に file を指定して使用する場合に使用
- text/plain
- プレーンテキスト形式で送信します。デバッグ目的で仕様書に追加されたものとのことです。実用的なフォーム送信では基本的に使用しません
<form enctype="multipart/form-data"></form>
HTTP メソッド
method=”” 属性はフォーム送信時にブラウザが使用する HTTP メソッドです。
- post
- 値を HTTP リクエストの本文に含み送信する方法。パスワードのような重要な情報を送信する場合などに使用
- get
- 値を URL に追加して送信する方法。何か情報を検索したり取得するために使うためのメソッド
- dialog
- フォームが <dialog> 要素の中にある場合に使用します。送信するとダイアログが閉じます。
<form method="post"></form>
<button>, <input type=”submit”>, <input type=”image”> の formmethod 属性が指定されている場合は、親要素の form 属性の指定より優先されます。
フォームの名称
name=”” 属性ではフォームの名称を指定します。フォームがスクリプトから参照される場合などに指定することがあります。
<form name="form001"></form>内容を検証しない
navalidate 属性はフォームデータ送信時、データの内容を検証しないようにします。
<form novalidate></form>
この設定は <button>, <input type=”submit”>, <input type=”image”> の formnovalidate 属性を指定すると上書きれます。
フォーム送信結果の表示方法
target 属性はフォームを送信後その結果表示をどのように表示するかを指定します。
- _self
- 現在のウインドウに表示
- _blank
- 新規ウインドウまたはタブに表示
- _parent
- 親ウインドウに表示（フレーム使用時）
- _top
- フレームを解除し現在のウインドウに表示、フレームでない場合は _self と同等
<form target="_self"></form>
この値は、 <button>, <input type=”submit”>, <input type=”image”> の formtarget 属性を指定すると上書きされます。
サンプル
<form action="" method="post">
<p><label>名前：</label><input type="text" value=""></p>
<p><label>メールアドレス：</label><input type="email" value=""></p>
<p><label>種類：</label>
<select required="" aria-required="true">
<option value="選択1">選択1</option>
<option value="選択2">選択2</option>
<option value="選択3">選択3</option>
</select></p>
<p><label>内容：</label><textarea></textarea></p>
<p><button type="submit">送信</button></p>
</form>