htmlのform
htmlフォームにはメールフォーム、申込フォーム、アンケートフォームがあります。いずれも値を入力してサーバに送信します。送信するための情報を格納する入れ物は、フォームコントロールと呼ばれいくつかの種類があります。
サーバに送信されたフォームの情報はサーバ側のプログラム（phpやperl）で処理します。ここでは触れませんが当サイトのPHPのカテゴリで説明してます。
formタグと記述
htmlのformを記述する場合は、送信する内容をformタグで囲み、属性も記述します（ここでは比較的よく使用される属性のみ説明してます）。
action属性
action属性は、送信先（URL）を指定する際に使用します。値を受け取るプログラムを用意してないと何も処理されません。
method属性
method属性は、データの送信方法を指定します。 method属性の値として指定できるのはPOST送信とGET送信の2種類で何も指定しないと初期値でGET送信になります。
| GET | 送信内容がURLとして渡されます |
|---|---|
| POST | 本文（本体）として送信さます |
enctype属性
enctype属性は、method属性でpostを指定した場合のデータ送信形式を指定します。 enctype属性の値として指定できるのは以下の３種類です。 どのような形式のデータを送信するかによって、値を使い分けます。
| application/x-www-form-urlencoded | 全ての文字をURLエンコードする |
|---|---|
| multipart/form-data | ファイルを含むデータ（フォームからファイルをアップロードする場合） |
| text/plain | 文字はエンコードしない（スペースだけ「+」記号に変換する） |
初期値はenctype=”application/x-www-form-urlencoded”です。 これは複数の「フィールド名=入力内容」を&でつないだ形式のデータで、送信されるデータはURLエンコードされます。 送信するデータの中にファイルが含まれる場合、例えば、画像のアップロードなどの場合にはenctype=”multipart/form-data”を指定します。
name属性
name属性は、フォームの名前を指定する際に使用します。
formコント―ロール
formに配置するコントロールは、ユーザーにどのような情報を送信してもらうかによって使い分けます。fromのソースは以下のようなソースになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>form test</title> </head> <body> <h1>form のテスト</h1> <form action="send.php" method="post"> 名前： <input type="text" name="namae" size="40"> <br> 性別： <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <br> 血液型： <select name="blood"> <option value="A">A型</option> <option value="B">B型</option> <option value="O">O型</option> <option value="AB">AB型</option> </select> <br> 備考欄：<br> <textarea name="kanso" rows="4" cols="40"></textarea> <br> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form> </body> </html> |
inputtext
一行のテキストボックスで会社名や氏名など簡単な文字列が入力できます。
|
1 |
<input type="text" name="namae" value=""> |
radio botton
ラジオボタンとは複数用意された選択肢の中からひとつを選択できるボタンのことです。
|
1 2 |
<input type="radio" name="question" value="yes">はい <input type="radio" name="question" value="no">いいえ |
checkbox
チェックボックスとは複数用意された選択肢の中から複数の項目を選択できるボタンのことです。
|
1 2 3 4 |
<input type="checkbox" name="tokui" value="1">国語 <input type="checkbox" name="tokui" value="2">算数 <input type="checkbox" name="tokui" value="3">理科 <input type="checkbox" name="tokui" value="4">社会 |
select option
セレクトオプションは、複数用意一覧からひとつを選択できる選択リスト。
|
1 2 3 4 5 6 7 |
<select id="language" name="language"> <option value="en">英語</option> <option value="de" disabled>ドイツ語</option> <option value="fr">フランス語</option> <option value="ja" selected>日本語</option> <option value="zh">中国語</option> </select> |
texitarea
複数行テキストを入力できるテキスト入力ボックスです。
|
1 |
<textarea name="txt" rows="4" cols="30">ここに複数行テキストを入力。</textarea> |
buttun
formの内容を送信したりリセットするボタンです。
|
1 2 |
<input type="submit" value="送信する"> <input type="reset" value="入力内容をリセットする"> |
get送信とpost送信
get送信（methodでgetを指定）
get送信は、送信内容がURLとして渡されます。 フォーム入力された内容は、action属性で指定したURLの後ろにクエスチョンマーク（ ? ）を付けて、それ以降続くにクエリとして送信先ページに渡されます。 そのため、入力内容はURLにそのまま表示されます。 一般的なブラウザではURLの長さに制限があるため、長すぎるデータは途中で切れてしまうので注意が必要です。 短めのキーワードや番号などを送信するのに適した送信方法であり、長い文章などを送信するのには向いていません。 “get”というのは「クエリ付きURLの情報を“取得する”」という意味です。
post送信（methodでpostを指定）
post送信を指定するとURLの後ろに付くクエリとしてではなく、送信内容自体が本文（本体）として送信されます。 入力内容がURLに表示されることはなく、かなり長い文章も送信することができます。 “post”というのは「フォームの内容を送信先ページに“送る”」という意味です。