■ 12.フォームの作成

さあ、《HTMLの解説》もいよいよ大詰めになってきましたが、付いて来れてますか？

今回は、フォームの作成です。
フォームとは、閲覧者に情報入力を促す画面などを言います。
例えば、アンケートや掲示板などの画面がそうです。

ただ、ここでひとつ問題が生じます。

アンケートなどは情報入力されたものを管理者が受け取ればいいだけですが、掲示板などは入力と同時に追記表示したいとか思いますよね。
ところが、HTMLだけでは後者のほうはできません。
残念ながら、掲示板などはCGIじゃないとできないのです。
また、アンケートであっても少し専門的な説明が入ってきますので心して読んでください。

まずは、簡単なアンケートを入力して、受信する方法を例に説明していきたいと思います。

■ フォームのサンプル

簡単なアンケートフォームは、次のように記述します。

【フォームのサンプル】

お名前：　 年齢：　　

<form action="mailto:aaa@bbb.jp" method="POST" enctype="text/plain">
お名前：<input size="16" type="text" name="お名前" value="必須">　
年齢：<input type="text" name="年齢" size="4" value="">　　
<input type="submit" value="送　信" name="submit">
<input type="reset" name="reset">
</form>


■ フォームの実行

前述のフォームのお名前欄に「atom」、年齢欄に「20」と入力して送信ボタンを押すと、標準のメールソフト（Windowsなら Outlook Expressなど）の送信トレイに「お名前=atom 年齢=20」の内容の送信メールがセットされます。

ただし、自動的にはメール送信できないので閲覧者が送受信作業を行う必要があります。

■ フォームの構成要素

フォームにはいろいろな構成要素がありますのでそのサンプルを次に記述します。

１行テキスト	<INPUT type="text" size="10" name="subject" value="必須">
パスワード入力	<INPUT type="password" size="8" name="password" value="0000">
チェックボックス	<INPUT type="checkbox" name="check1" value="Yes" checked>   <INPUT type="checkbox" name="check2" value="ある">   <INPUT type="checkbox" name="check3" value="married"> ※チェックボックスは、on/off を指示する項目です。 　それぞれが独立しています。
ラジオボタン	<INPUT type="radio" name="radio1" value="1" checked>   <INPUT type="radio" name="radio1" value="2">   <INPUT type="radio" name="radio2" value="1">   <INPUT type="radio" name="radio2" value="2" checked> ※ラジオボタンはグループ化された中からひとつを選択するときに使用します。 　同じ名前のものがグループ化されます。
隠し項目	<INPUT type="hidden" name="form-name" value="anketo1"> ※隠し項目のため表示されない
ファイル選択ボタン	<INPUT type="file" name="filename" value="c:\" size="16">
送信ボタン	<INPUT type="submit" value="送  信">
リセットボタン	<INPUT type="reset" value="クリア">
プッシュボタン	<INPUT type="button" value="表示"> ※このボタンは、JavaScriptやVBScriptでのみ使用します。
複数行テキスト コメントの入力	<TEXTAREA cols="16" rows="2" name="comment">コメントの入力</TEXTAREA>
オプションメニュー 男性 女性 不明	<SELECT name="sex">   <OPTION value="men" selected>男性</OPTION>   <OPTION value="female">女性</OPTION>   <OPTION value="none">不明</OPTION> </SELECT>
リストボックス 商品1 商品2 商品3 商品4 商品5	<select size="3" name="item" tabindex="1" style="height: 60px;">   <OPTION value="1" selected>商品1</OPTION>   <OPTION value="2">商品2</OPTION>   <OPTION value="3">商品3</OPTION>   <OPTION value="4">商品4</OPTION>   <OPTION value="5">商品5</OPTION> </SELECT> ※DTDのスタイル属性の「height」を指定しないと複数行を表示できないようです。
リストボックス（複数選択） 商品1 商品2 商品3 商品4 商品5 ※[Ctrl]キーを押しながら、クリックする	<SELECT name="item" size="3" multiple>   <OPTION value="1" selected>商品1</OPTION>   <OPTION value="2">商品2</OPTION>   <OPTION value="3">商品3</OPTION>   <OPTION value="4">商品4</OPTION>   <OPTION value="5">商品5</OPTION> </SELECT>

各構成要素の属性については、「13.フォームの属性」を参照してください。