HTML/フォーム

フォームとは、ユーザに何らかの情報を入力させ、それをサーバに送信するためのものである。form要素を用意し、その中にフォームを構成する部品のinput要素などを入れていくことで作成される。

フォーム全体の構成

<form action="post.cgi" name="名前" method="post">
<input type="text" value="ウィキブックス">
<input type="submit" value="送信">
</form>

form要素

HTMLソース中でそのフォームの開始位置と終了位置を明示する要素。

name属性

ページの外にある別のフォームなど識別を行うため、任意の値を指定して識別用の名称を付与する。

action属性

フォームに入力されたデータの送信先を指定する。拡張子は別に.cgiでなくても良い (たとえば.phpなどの拡張子でも良い)。

method属性

フォームの送信形式を指定する属性。GETとPOSTの2種類があり、指定しない場合GETが自動的に指定される形となる。それぞれHTTPのGETメソッドとPOSTメソッドを使用することを意味する。GETは、送信先（action属性で指定されるもの）のURIの末尾に、?name属性値=value値&name属性値=value値... という文字列を付加することによって情報を送信する。POSTは、HTTPリクエストボディに情報を記述して情報を送信する。一般に、検索エンジンのキーワードなどURLに環境変数を付与したほうが都合の良い場合はGET、個人情報の入力などURLに情報が残ると不都合の起こる場合にはPOSTが使われる（個人情報の送信はHTTPSなどと合わせて利用されることが多い）。

input要素

フォームから送信される情報を入力したり、フォーム全体の操作を行ったりするための部品を表示させるための要素。type属性により様々な種類を指定することが可能。属性値の種類やその属性値を指定した場合にどのようなことが出来るかについては後述する。

フォーム機能の限界

htmlフォームだけでは、外部ファイルへの保存書き込みを出来ない。なので、せっかくユーザーに入力してもらった情報を、htmlだけでは、どこにも保存できない。

もし外部ファイルに保存書き込みをしたいなら、たとえばPHPファイルなどで書かれたサーバーサイドのプログラムと通信し、さらにそのPHPプログラムの命令を使って、保存先のファイルに書き込みことになる。

詳しくはwikibooks『PHP/ファイル入出力』で説明する。

汎用属性

name属性

フォーム内にある各部品（input要素）に対して指定する。送信を行うときに、各フォームを識別するためのもの。

disabled属性値

指定されたフォームのコントロールを無効化するために指定する。この属性値が指定されたフォームは一切の内容を変更することが不可能となり、またフォーム内では存在しないものと同様の扱いを受ける。しばしJavaScriptとの組み合わせで必要のないフォームデータの送信をブロックするために用いられる。

部品の種類

各部品は、input要素の、type属性に指定した内容によって作成することができる。

送信ボタン

<input type="submit" value="ボタンテキスト">

<button type="submit">ボタンテキストまたは画像など</button>

<input type="image" src="画像のファイルパス" alt="代替テキスト">

form要素内で指定された内容を送信するボタン。クリックすると情報を送信し、form要素に指定されたaction属性の内容に基づいてページ遷移を行う。

input要素のname属性に名前を指定した場合、その要素のtypeがsubmitの場合はvalue属性の属性値が、imageの場合はクリックした場所の座標が送信されることがある。

input要素のtype属性にsubmitを指定した場合valueを指定しなくてもブラウザデフォルトの文字列が表示されるが、文字列はブラウザの種類や言語環境によって異なる。input要素のtype属性にimageを指定した場合やbutton要素の間にimg要素を持ってくる場合は、画像が表示できないときのためにalt属性に代替テキストを必ず指定しなければならない。

リセットボタン

<input type="reset" value="ボタンテキスト">

<button type="reset">ボタンテキスト</button>

form要素内の値をリセットし初期状態へと戻す。input要素で作ったリセットボタンはデフォルトであればブラウザが自動的に文字列を指定するが、その値はブラウザの種類や言語環境によって異なる。

汎用ボタン

<input type="button" value="ボタンテキスト">

<button type="button">ボタンテキスト</button>

単体ではクリックしても何も起こらないボタン。送信もリセットも行わない。JavaScriptのonclick属性などと組み合わせて利用するのが一般的である。valueの属性を省略してもブラウザがデフォルトの文字列を指定することはない。

ファイル選択

<input type="file" name="名前" accept="MIMEタイプ">

CGIでローカルファイルをサーバーへ送信するときに使用する。ローカルファイルを選択するフォームを表示する。フォームのデザインやボタンテキストなどはOSやブラウザに依存であり、スタイルシートなどを使ってこれを変更することは出来ない。accept属性で選択可能なファイルタイプを「,」区切りにして指定することが出来るが、サポート環境は少ない。なお、この機能を利用する場合はform要素のmethod属性にpostを、enctype属性にmultipart/from-dataを設定する必要がある。

Internet Explorerではこのフォームから情報を送信したとき送信後に表示されるページがキャッシュされず、一度ページ遷移を行うと元のページをブラウザバックで表示できないと言う問題が存在する。

一行テキストボックス

<input type="text" value="初期値" name="名前" maxlength="最大文字数" readonly>

改行を含まない文字列を表示・入力するフォーム。maxlength属性で最大文字数を指定でき、指定しなかった場合は無制限となる。readonly属性値（属性名ではない）を指定すると入力値を変更不可能とすることが出来る。

複数行テキストボックス

<textarea cols="横の文字数" rows="縦の文字数" wrap="on" readonly>デフォルト
の
文字列</textarea>

改行を含んだ文字列（文章）を表示・入力するフォームにはinput要素でなくtextarea要素を使用する。デフォルトでは右端に来たとき自動的に文字列が折り返されるが、wrap属性をoffにした場合右端に来ても折り返しが行われることはなくそのまま横に続く。テキストエリア内に書かれたHTMLなどは全て無効化され、実体参照以外は改行も含めて全てがそのままの状態で表示されることが多い。readonly属性値を指定すると、入力された値を変更できないようになる。

パスワード用テキストボックス

<input type="password" name="名前" value="初期値">

認証などでパスワードを入力するためのフォーム。入力された文字列はアスタリスク (“*”) や黒丸 (“●”)などでマスクされた状態で表示されることが多い。パスワード用テキストボックスの文字列値をクリップボードからの貼り付けで変更することは出来るが、入力された文字列をクリップボードにコピーすることは出来ないことが多い。

隠しフォーム

<input type="hidden" name="名前" value="初期値">

画面上に表示されないフィールドを作成する。ユーザー側に任意値の入力を求める必要がなく、CGIプログラム側で識別が必要な設定値などをこれに指定する。

ラジオボタン

<input type="radio" name="名前" value="識別値" checked>

radio属性で複数存在する選択項目からひとつの内容を選択できるようにするラジオボタンを作成する。同じグループに属するラジオボタンには全て同じname属性値を指定しなければならない。value属性値を指定することでどの項目が選択されたかフォーム送信時に識別させる。checked属性値を指定することで指定された項目を初期状態でチェックさせることが可能。

チェックボックス

<input type="checkbox" name="名前" value="識別値" checked>

複数の選択項目の中から複数項目を選択できるようにするチェックボックスを作成する。name属性でグループを識別し、value属性値で選択された項目を識別する。ラジオボタンと同様、checked属性値を指定することで指定された項目を初期状態でチェックさせることが可能。

リストメニュー

予め用意された項目の中から特定のものを選択する形式のメニュー。通常はvalue属性値に指定された値がフォーム送信時に利用されるがこれを省略した場合項目名（option要素に囲まれた文字列）がフォームの値として送信される。

プルダウンメニュー

<select name="名前">
<option value="識別値1">項目1</option>
<option value="識別値2" selected>項目2</option>
<option value="識別値3">項目3</option>
<option value="識別値4">項目4</option>
</select>

select要素とoption要素を使用することでプルダウンメニューを作成できる。任意のoption要素にselected属性値を指定した場合その項目が初期状態で選択状態となり、指定しなかった場合どの項目が指定されるかはブラウザ依存となる（通常一番上が指定される）。

一般的なブラウザでは右端に表示されるマークを押してプルダウンメニューを表示し、項目をクリックすることで選択する仕組みだが、一部ブラウザでは格納状態のプルダウンメニュー上でマウスホイールを上下することにより項目を選択することも可能となっている。

グループメニュー

<select name="名前">
<optgroup label="グループ名1">
<option label="ラベル1-1" value="識別値1-1">項目1-1</option>
<option label="ラベル1-2" value="識別値1-2">項目1-2</option>
<option label="ラベル1-3" value="識別値1-3">項目1-3</option>
<option label="ラベル1-4" value="識別値1-4">項目1-4</option>
</optgroup>
<optgroup label="グループ名2">
<option label="ラベル2-1" value="識別値2-1">項目2-1</option>
<option label="ラベル2-2" value="識別値2-2">項目2-2</option>
<option label="ラベル2-3" value="識別値2-3">項目2-3</option>
<option label="ラベル2-4" value="識別値2-4">項目2-4</option>
</optgroup>
<optgroup label="グループ名3">
<option label="ラベル3-1" value="識別値3-1">項目3-1</option>
<option label="ラベル3-2" value="識別値3-2">項目3-2</option>
<option label="ラベル3-3" value="識別値3-3">項目3-3</option>
<option label="ラベル3-4" value="識別値3-4">項目3-4</option>
</optgroup>
</select>

option要素群をoptgroup要素でグループ分けすることによりプルダウンメニューのグループ表示が可能になる。option要素のlabel属性の属性値は表示をグループ化したときに表示されるもので、メニュー項目の省略形を記述するようになっている。ただし一般的なブラウザで現在このグループ表示に対応しているものは非常に少なく、未対応ブラウザではoptgroup要素を選択不可能項目として表示させるようになっていることが多い。

リストボックス

<select name="名前" size="行数" multiple>
<option value="識別値1">項目1</option>
<option value="識別値2" selected>項目2</option>
<option value="識別値3">項目3</option>
<option value="識別値4">項目4</option>
</select>

select要素にsize属性を指定すると複数行表示が可能になり、size属性の値が行数になる。一般的に、項目が行数より多い場合は行数分だけ表示され、残りはスクロールバーを利用して表示・選択できる形となる。また、multiple属性値を指定した場合複数項目を選択して送信できるようになる。