<form>…… 入力・送信フォームを作る
<form>タグは、入力・送信フォームを作る際に使用します。<form>～</form>の間に、<input>・<select>・<textarea>等のタグで、一行テキストボックス・サブミットボタン・ラジオボタン・チェックボックス・セレクトボックス・テキストボックス等のフォーム部品を配置します。
フォームに入力されたデータは、送信ボタンを押すことでウェブサーバーへ送信されます。その際の送信先URLはaction属性で、データの送信方法はmethod属性で、送信するデータの形式はenctype属性でそれぞれ指定します。ウェブサーバーへ送信されたデータのプログラム処理は、HTMLやCSSではなくPHPやCGIなどのサーバーサイド・スクリプトで行います。
■action属性は送信先URLを指定する
action属性は、送信先URLを指定する際に使用します。
[html]
<form action="mail.php"> ～ </form>
[/html]
尚、<input>や<button>で作成されるサブミットボタンにformaction属性が指定されている場合には、formaction属性の値が優先されます。
■method属性はデータの送信方法を指定する
method属性は、データの送信方法（HTTPメソッド）を指定する際に指定します。method属性の値として指定できるのは以下の２種類です。
- get …… 送信内容がURLとして渡される（初期値）
- post …… 本文（本体）として送信される
初期値はmethod=”get”です。method=”get”を指定すると送信内容がURLとして渡されます。フォーム入力された内容は、action属性で指定したURLの後ろにクエスチョンマーク（ ? ）を付けて、それ以降続くにクエリとして送信先ページに渡されます。そのため、入力内容はURLにそのまま表示されます。一般的なブラウザではURLの長さに制限があるため、長すぎるデータは途中で切れてしまうので注意が必要です。短めのキーワードや番号などを送信するのに適した送信方法であり、長い文章などを送信するのには向いていません。”get”というのは「クエリ付きURLの情報を“取得する”」というほどの意味です。
method=”post”を指定するとURLの後ろに付くクエリとしてではなく、送信内容自体が本文（本体）として送信されます。入力内容がURLに表示されることはなく、かなり長い文章も送信することができます。”post”というのは「フォームの内容を送信先ページに“送る”」というほどの意味です。
[html]
<form action="mail.php" method="post"> ～ </form>
[/html]
尚、<input>や<button>で作成されるサブミットボタンにformmethod属性が指定されている場合には、formmethod属性の値が優先されます。
■enctype属性は送信データの形式を指定する
enctype属性は、送信するデータの形式を指定する際に指定します。enctype属性の値として指定できるのは以下の３種類です。どのような形式のデータを送信するかによって、値を使い分けます。
- application/x-www-form-urlencoded …… 複数の「フィールド名=入力内容」を&でつないだ形式のデータ（初期値）
- multipart/form-data …… ファイルを含むデータ
- text/plain …… プレーンテキストのみ
初期値はenctype=”application/x-www-form-urlencoded”です。これは複数の「フィールド名=入力内容」を&でつないだ形式のデータで、送信されるデータはURLエンコードされます。送信するデータの中にファイルが含まれる場合、例えば、画像のアップロードなどの場合にはenctype=”multipart/form-data”を指定します。
[html]
<form action="mail.php" method="post" enctype="application/x-www-form-urlencoded"> ～ </form>
[/html]
■accept-charset属性は送信データの文字エンコーディングを指定する
accept-charset属性は、送信されるデータの文字エンコーディングを指定する際に使用します。多くの場合、文字エンコーディングを指定しなくてもサーバー側で自動判別されるようですが、文字化けが起きる場合にはaccept-charset属性を指定することで回避できるかもしれません。
日本語の文字エンコーディングの値としては、”UTF-8″・”Shift_JIS”・”EUC-JP”などが挙げられます。大文字と小文字の違いは区別されません。
accept-charset属性の値には、複数の文字エンコーディングの候補を半角スペースで区切って指定することもできます。この場合、指定した順にサポートされている文字エンコーディングが使用されることになっています。
[html]
<form action="mail.php" method="post" accept-charset="UTF-8"> ～ </form>
[/html]
■name属性はフォームに名前を付ける
name属性は、フォームの名前を指定する際に使用します。name属性の値に空文字を指定することはできません。また、他のフォーム名と重複しないようにしなくてはなりません。
[html]
<form action="mail.php" method="post" name="sample"> ～ </form>
[/html]
■autocomplete属性は自動補完のオンオフを指定する
autocomplete属性は、オートコンプリートのオン（on）/オフ（off）、つまり、入力欄の自動補完を有効にするかどうかを指定する際に使用します。初期値はautocomplete=”on”です。オートコンプリートを無効にする場合にはautocomplete=”off”を指定します。
[html]
<form action="mail.php" method="post" autocomplete="off"> ～ </form>
[/html]
■novalidate属性はフォームのバリデーション機能を無効にする
novalidate属性は、入力されたデータのバリデーション（妥当性チェック）をしないようにする際に使用します。HTML5では<input type=”email”>や、<input type=”url”>などの属性値を指定することができますが、これらの属性値に対応したブラウザでは、EメールやURLとして妥当ではない内容が入力された場合にはバリデーション機能が働いてデータが送信されません。novalidate属性を指定すると、このバリデーション機能が無効になります。
[html]
<form action="mail.php" method="post" novalidate="novalidate"> ～ </form>
[/html]
■HTML4.01からHTML5へのバージョンアップによる変更点
form要素は、HTML5ではaccept属性が廃止され、autocomplete属性・novalidate属性が追加されています。
■使用できる属性
- accept-charset属性
- 送信するデータの文字エンコーディングを指定（UTF-8・Shift_JIS・EUC-JPなど）
- action属性
- 送信先URLを指定
- autocomplete属性
- オートコンプリートのオン/オフを指定（on・off）
- enctype属性
- 送信するデータの形式を指定（application/x-www-form-urlencoded・multipart/form-data・text/plain）
- method属性（初期値はget）
- 送信方法（HTTPメソッド）を指定（get・post）
- name属性
- フォームの名前を指定
- novalidate属性
- 入力されたデータの妥当性を確認しない（novalidate）
- target属性
- フォーム送信するターゲット先を指定（_blank・_self・_parent・_top・任意のターゲット名）
■HTML5での使用例
[html]
<form action="mail.php" method="post">
<p><label>名前：<input type="text" name="name" size="40"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男</label></p>
<p><label><input type="radio" name="sex" value="female">女</label></p>
</fieldset>
<fieldset>
<legend>趣味</legend>
<p><label><input type="checkbox" name="hobby" value="sports">スポーツ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>コメント：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>
[/html]
