フォーム
Updated / Published
新聞・雑誌・テレビ等のメディア（媒体）は、情報の流れが一方向的なことに弊害があるのに対し、メディアとしてのインターネットの最大の利点は情報の流れが双方向的（インタラクティブ）なことにあります。この双方向的な情報の流れをWWW上のウェブページで可能にしているのが HTML のフォームという仕組みです。たとえば、ウェブページ上でユーザに対してアンケートを行ったり、ユーザからのメールを受け取るための問い合わせ窓口を設けたり、電子掲示板（BBS）を使って情報交換を行ったりなど、これらは全てフォームを使うことでウェブページにおける情報の流れをインタラクティブ（双方向的）なものにしています。
その際にフォームには、データを入力するための入力欄や選択肢が設けられていて、そこに入力されたデータを送信すると、ウェブサーバを通して、データはプログラムへと渡されます。このようなウェブサーバとプログラムの間のやり取りの手順を CGI と呼び、この手順によって実行されるプログラムを CGIプログラムと呼びます。CGIプログラムは Perl や PHP、Ruby で作成されることが多いですが、他にも C や Java 等のウェブサーバにインストールされているプログラミング言語を使って作成することができます。HTML のフォームは、CGIプログラムにデータを渡すための「どこに」「どうやって」といった単純な設定を行うだけで、入力されたデータの処理などの複雑なやり取りについてはウェブサーバと CGIプログラムの間で行われることになりますので、ここで紹介する内容もGGIを作ることにはふれていませんので、 HTML によるフォームの設定についてに留まります。
フォームを定義する
<form action="CGIプログラムのURI" method="post">...</form>form要素はフォーム全体を定義するブロックレベル要素です。form要素だけではユーザが入力した情報を受け取ることはできません。form要素の間にテキスト入力欄や選択欄などのオブジェクトを指定する必要があります。つまり、ユーザから送ってきてほしいデータの種類に応じて、それに適したオブジェクトなどを制作者が設定しておきます。
form要素の action属性は入力されたデータの送信先を指定する属性です。値には主に CGIプログラムの URI を記述して用いられています。
form要素の method属性はデータを送信する際の HTTP（ウェブサーバとUA がデータを送受信する際に使われている通信手順のこと）のリクエストに使うメソッド（方法）を指定します。値には "post"、または "get" の2種類が使われます。"get" は送信するデータ量が小さい場合に、"post" は送信するデータ量が大きい場合とで使い分けると良いでしょう。method属性の指定がない場合、"get" が初期値となります。
フォームを構成するテキスト入力欄や選択欄などのオブジェクトのことをコントロールと呼びます。コントロールには以下のようなものがあります。
- チェックボックス
<input type="checkbox">- ラジオボタン
<input type="radio">- 選択メニュー
<select>- テキスト入力欄
<input type="text">,<textarea>- ファイル参照欄
<input type="file">- パスワード入力欄
<input type="password">- 隠し項目
<input type="hidden">- 送信ボタン
<input type="submit">,<button type="submit">- リセットボタン
<input type="reset">,<button type="reset">- イメージボタン
<input type="image" src="画像ファイルのURI">- 汎用押しボタン
<button type="button">,<input type="button">
これらコントロール部品には、それぞれ name属性で指定される「名前」があり、value属性などで指定される「既定値」があります。そして既定値はユーザ側の入力や選択といった操作で変更され、「現在値」となります。フォームでは、この「名前/現在値」のセットでデータが送られることになります。既定値の指定や送出内容は、コントロール形式によって異なります。なお、HTML4.01厳密型DTD では body要素などと同様にテキストやインライン要素を form要素内に直接含めることはできず、その間に p要素, div要素などのブロックレベル要素を内包しなければなりません。
フォームで送るデータ形式
<form action="CGIプログラムのURI" method="post"
enctype="multipart/form-data">
......
添付ファイル：<input type="file" name="selected-file">
......form要素の enctype属性は method="post" を指定した場合のフォームに入力されたデータを送出する際に、これをウェブサーバが正しく解釈できるようにデータの形式（MIMEタイプ）を指定するために使います。フォームからのデータは、さまざまな環境で扱えるように、コード化（エンコード）した形で送られます。値に指定できる形式には主に以下の3種類があります。
- application/x-www-form-urlencoded
- パーセンテージ（
%）と英数字で構成される URLエンコード形式（URI に用いられる文字列）で送信 - 日本語などの2バイトフォントやASCII の文字コードに含まれないデータは16進数にエンコード（変換）する
enctype属性の指定がない場合は "application/x-www-form-urlencoded" が初期値となる
- パーセンテージ（
- multipart/form-data
- マルチパートデータ（添付ファイル）として送信
- 符号化方式もセットに送信されるので、文字化けを防ぐ方法としても有用
- ファイルや日本語などの2バイトフォント、バイナリデータを含むフォームの送信時に指定する
input要素のtype属性 に "file" が指定されている場合に、ファイルのアップロードを可能にする
- text/plain
- 単純テキストファイル形式で送信
action属性に "mailto:" の記述でメールアドレスを指定した場合などに使う- ただし、HTTP を使わないものは仕様に定義されていないため、動作はユーザの環境（UA やメールソフト）に依存します
enctype属性の指定がない場合は、"application/x-www-form-urlencoded" が初期値です。CGIプログラムでファイルのアップロードを可能にする場合は、必ず "multipart/form-data" を設定する必要があります。
テキストフィールドの設定
1. 1行のテキスト入力欄を設ける
<input type="text" name="address" size="30"
value="お届け先を記入してください" maxlength="80">input要素は入力フィールドを定義する要素で、いくつかの形式を指定できます。その形式を指定するのが type属性です。値に "text" を指定する（type="text"）と1行分のテキスト入力欄を作成します。name属性は入力欄に名前をつける属性です。値の内容は入力情報とともに送信されるため、入力情報を受け取ったときに、どの項目に対する回答なのかがわかるように質問の内容を示しておきます。value属性は入力欄にページを表示したときの状態ではじめに表示させておくテキストを指定する属性で、値には value="お名前を記入してください" のようにその項目に一体何について記入するのかがわかるように簡潔な説明を指定します。または入力欄の前に何について入力するのかを説明したテキストを記述しておけば、値を空（value=""）にしておいても良いでしょう。size属性は入力欄のサイズ（横の長さ）を指定し、maxlength属性は入力欄に入力できる最大文字数を指定します。いずれも値は整数（文字数で解釈）で指定します。input要素は内容をもたない空要素なので、終了タグはありません。
2. 複数行のテキスト入力欄を設ける
<textarea rows="4" cols="40" name="message">メッセージをどうぞ</textarea>textarea要素は複数行のテキスト入力欄を作成します。rows属性は入力欄の縦幅を指定する属性で、値には半角数字の整数で行数を指定します。cols属性は入力欄の横幅を指定する属性で、値には半角数字の整数（文字数で解釈）で横幅のサイズを指定します。textarea要素で作成する入力欄には最大入力文字数を制限するような属性は定義されていないため、領域を超える文字数が入力されるとスクロールバーを表示して、いくらでも入力することができます。name属性は入力欄に名前を付ける属性です。値の内容（任意の名前）は入力された情報といっしょに送信されるため、項目の内容がわかるものにしておきます。textarea要素は空要素ではなく終了タグも必須のため、何かしらのテキストを内容にする必要があります。textarea要素内に入力された内容はページを表示した状態ではじめに表示させておくテキストになります。ここには、このテキスト入力欄が何について記入する項目なのかがわかるように簡潔な説明を記述しておくと良いでしょう。
チェックボックスの設定
普段利用している検索エンジンを教えてください（複数回答可）。<br>
<input type="checkbox" name="search" value="yahoo" checked>Yahoo! JAPAN
<input type="checkbox" name="search" value="google">Google
<input type="checkbox" name="search" value="Bing">Bing
<input type="checkbox" name="search" value="Baidu">Baiduinput要素の type属性の値に "checkbox" を指定する（type="checkbox"）とチェックボックスを作成します。<input type="checkbox" ...> で1つのチェックボックスを作成するので、選択肢の数だけこの指定が必要です。また、表示されるのはチェックボックスだけなので、その項目が何の項目なのかがわかるように、input要素の直前、または直後に項目の見出しを記述するようにします。
name属性はそのコントロールに名前を指定する属性で、質問項目の内容を反映させます。value属性はチェックボックスがチェックされた場合に送信されるテキストを指定する属性で、選択肢の内容を反映させておきます。そして、name属性と value属性の2つがセットで「何の質問（name属性の値）に対してどの回答（value属性の値）をした」かが受信したデータでわかります。
また、checked属性を指定したボックスには、あらかじめチェック（選択）された状態で表示されます。チェックボックスは複数の選択肢から複数の回答が可能となります。単数回答のセレクトボタンを作成する場合にはラジオボタンを使います。
ラジオボタンの設定
他サイトをフレーム内に表示するようなリンクは失礼だと思いますか（単一回答）。<br>
<input type="radio" name="enquete" value="answer1" checked>とてもそう思う
<input type="radio" name="enquete" value="answer2">そう思う
<input type="radio" name="enquete" value="answer3">どちらとも思わない
<input type="radio" name="enquete" value="answer4">そうは思わないinput要素の type属性の値に "radio" を指定する（type="radio"）とラジオボタンを作成します。<input type="radio" ...> で1つのラジオボタンを作成するので、選択肢の数だけこの指定が必要です。また、表示されるのはラジオボタンの項目だけなので、その項目が何の項目なのかがわかるように input要素の直前、または直後には項目の見出しを記述するようにします。
name属性はそのコントロールに名前を指定する属性で、質問項目の内容を反映させます。value属性はラジオボタンがマークされた場合に送信されるテキストを指定する属性で、選択肢の内容を反映させておきます。そして、name属性と value属性の2つがセットで「何の質問（name属性の値）に対してどの回答（value属性の値）をした」かが受信したデータでわかります。
また、checked属性を指定したラジオボタンには、あらかじめマークされた状態で表示されます。ラジオボタンは複数の選択肢から複数の回答ができるチェックボックスとは異なり、単数選択しかできません。
パスワード入力欄の設定
パスワード：<input type="password" name="password" value="" size="8" maxlength="8">input要素の type属性の値に "password" を指定する（type="password"）とパスワード入力欄を作成します。基本はテキスト入力欄と同じですが、パスワード入力欄に入力された文字は全てアスタリスク（*）の伏字で表示されます。
name属性はそのコントロールに名前をつける属性で、質問項目の内容を反映させます。value属性はパスワード入力欄にあらかじめ表示させる内容を指定する属性ですが、パスワード入力欄の内容は伏字になるため、入力欄の前に「パスワードを記入してください」のように何を入力すれば良いのかを説明したテキストを記述して、値を空（value=""）にしておくと良いでしょう。
ファイル参照欄の設定
<form action="CGIプログラムのURI" method="post"
enctype="multipart/form-data">
......
添付ファイル：<input type="file" name="selected-file">
......input要素の type属性の値に "file" を指定する（type="file"）とファイル参照欄とファイル選択ボタンを作成します。これはアップロード機能のついた電子掲示板やメールフォームの添付ファイルを扱うフォームに利用されています。ファイル参照欄を利用する場合、form要素には必ず enctype="multipart/form-data" と method="post" をセットに指定しておく必要があります。
name属性はそのコントロールに名前を指定する属性で、値には選択されたファイルデータがセットになって送信される際に、その内容がわかるように内容を簡潔に示した文字列を指定します。表示は UA によって異なり、「参照...」や「選択...」といったファイル選択ボタンと、参照するファイル名を表示する入力欄が表示されます。ファイル選択ボタンを押すとローカルディスク（ハードディスク）からファイルを選択できるようになります。
選択メニューの設定
よく利用する検索エンジンを1つ選択して下さい（単一回答）。<br>
<select name="search-engine">
<option value="" selected>選択して下さい</option>
<option value="Yahoo">Yahoo! JAPAN</option>
<option value="Google">Google</option>
<option value="Bing">Bing</option>
<option value="Baidu">Baidu</option>
</select>select要素は選択メニューを作成します。option要素は選択肢の各項目を定義し、選択肢の数だけ select要素の中に option要素を指定します。
select要素の name属性はそのコントロールに名前を指定する属性で、値には受信したデータの質問項目の内容がわかるように内容を簡潔に示したものを指定します。選択メニューに表示させる選択肢は、option要素で指定します。選択肢が選ばれた場合に送信されるテキストを指定するのが option要素の value属性です。value属性の値には、回答がわかるように内容を簡潔に示した文字列を指定します。
また、option要素に selected属性を加えると、その項目ははじめから選択された状態で表示されます。どの option要素にも selected属性がない場合は select要素内で一番最初に定義されている option要素の項目が選択状態で表示されます。しかし、選択メニューは selected属性が指定されていないと UA の動作が保証されないため、selected属性を指定しておくことが強く推奨されています。
選択メニューのフィールド表示
よく利用する検索エンジンを選択してください（複数選択可）。<br>
<select name="search-engine" size="5" multiple>
<option value="" selected>選択して下さい</option>
<option value="Yahoo">Yahoo! JAPAN</option>
<option value="Google">Google</option>
<option value="Bing">Bing</option>
<option value="Baidu">Baidu</option>
</select>選択メニューを作成する select要素に size属性を加えると、プルダウン表示形式から指定されたサイズのフィールド内に一覧表示する形式になります。size属性はフィールドの高さを指定する属性で、値には半角数字の整数で行数を指定します。値を "2" 以上に指定すると選択肢の各項目を定義する option要素が3つ以上ある場合、項目の一覧がスクロール機能つきのリストで表示されます。つまり、選択肢を定義する数よりも、size属性で指定された値が小さいとフィールドにスクロールバーを表示します。
さらに multiple属性は複数選択を可能にする属性で、複数選択の操作方法はOSやUAになって異なり、Windows では Ctrl を、Mac では Cmd を押下状態で、さらにポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)の左ボタンを押下、または UA に設定されているフォームのコントロールの選択キー（例 Window版Firefox : Space）を押下することでフィールド上の複数選択が可能になります。
送信ボタンとリセットボタンの設定
送信ボタン
<input type="submit" value="書き込む">input要素の type属性の値に "submit" を指定する（type="submit"）とフォームの入力欄に書き込んだテキストや、チェックした選択肢の内容を送信する送信ボタンを作成します。
value属性はボタンの名前を任意に指定する属性です。送信ボタンの大きさは value属性に指定された文字列にあわせた形で表示されます。value属性の値の指定がない場合、UA の初期値によって表示が異なります。Internet Explorer では「クエリ送信」、または「クエリー送信」と表示され、Firefox では「実行」、Opera では「送信」のようにそれぞれ異なった表示になるため、ボタンの表示を統一したい場合は、value属性を指定するようにしましょう。
リセットボタン
<input type="reset" value="書き直す">input要素の type属性の値に "reset" を指定する（type="reset"）とフォームの入力欄に書き込んだテキストやチェックした選択肢をクリアして、フォームの内容をすべて初期化してしまうリセットボタンを作成します。
value属性はボタンの名前を任意に指定する属性です。リセットボタンの大きさは value属性に指定された文字列にあわせた形で表示されます。value属性の値の指定がない場合は、UA の初期値によって表示が異なり、多くの場合「Reset」、または「リセット」と表示されます。ボタンの表示を統一したい場合は、value属性を指定するようにしましょう。
送信ボタンのイメージ表示
<input type="image" name="go"
src="button.gif" alt="送信" width="90" height="60">input要素の type属性の値に "image" を指定する（type="image"）とイメージ付きボタンのボタンを作成します。このボタンは input要素の type属性の値に "submit" を指定した場合と同じ送信ボタンとして機能します。name属性はこのボタンに名前をつける属性です。
あとは img要素と同じ要領です。通常のテキスト表示のボタンに代わって画像を使う場合は、必ず alt属性で代替テキスト（altanative text）を指定します。代替テキストとは何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となるテキストのことです。ここでは送信ボタンとして機能するので alt="送信" という代替テキストにするのが良いでしょう。src属性は表示させる画像ファイルの所在を URI で指定します。width属性, height属性は表示する画像ファイルのサイズを指定する属性で、それぞれ width属性が横幅, height属性が高さをいずれも整数（ピクセル数で解釈）で指定します。