簡単なホームページの作り方第九回目
「フォーム｣
　今回は「フォーム」についてです。

フォームとは？
　あちらこちらのホームページを見てくればわかると思いますが、アンケートやコメントなどの収集に利用される書き込み可能な個所があります。
　これを「フォーム」といいます。

実際の使い方は？
　良く使われるのは、ホームページ上からメールを送信するという方法や、掲示板などの書き込みをする場所、選択肢を決定するなどといった方法として使われています。

さっそく表示させよう！！（一行入力）
　それではさっそく表示させてみましょう。
　フォームは、使い方が「テーブル」のときと似ています。
　まず、フォームを使うのに「<FORM></FORM>」タグを使用します。
　この「<FORM></FORM>」タグで色々な形状の書き込み可能な個所を指定するタグを挟み込みます。
　ためしに、下に書いてあるようにHTMLファイルに書き込んでみてください。

<FORM>
名前：<INPUT TYPE="text">
<BR>
パスワード：<INPUT TYPE="password">
</FORM>
　ブラウザで表示させてみると、下のように表示されるはずです。
名前：
パスワード：

一行入力の詳細
　もうおわかりだと思いますが、一行入力を指定するタグは、「<INPUT TYPE="〜">」であることがわかると思います。
　では、「TYPE="〜"」に入るものは何なのでしょうか？
　試しに、上にある書き込み可能な場所に何かを書き込んでみてください。
　どうでしょうか？
　「パスワード」と書かれているほうの横の欄では、「*」が表示されたと思います。
　じつは、この「TYPE="〜"」で入力する形式を決定することが出来るのです。
　「text」を指定すると、普通に表示されるようになり、「password」を指定すると「*」で表示されるようになります。

　また、「<INPUT TYPE="〜">」タグは、色々なオプションを指定することによって様々な追加機能が選られます。
　現在私が確認している動作するオプションは、

の四項目です。
　使用法は、「<INPUT TYPE="〜"> option」で使用するオプションを書き込みます。
　このうち、良く使用されるのが「SIZE」「NAME」の二つのオプションでしょう。
　「NAME」オプションは、転送されて来たデータを解読する時に使用されます。
　内容を転送する時は、必ずこのオプションを指定します。

複数行入力
　今度は複数行入力です。
　複数行入力を指定するタグは、「<TEXTAREA option></TEXTAREA>」で指定します。
　「option」に指定するのは、「ROWS=num（縦幅）」「COLS=num（横幅）」「NAME="フィールド名"」です。
　実際に下のようにHTMLを書いてみてください。

<FORM>
<TEXTAREA ROWS=10 COLS=80 NAME="テキストエリア">ここに書いてみてね。
</TEXTAREA>
</FORM>
　おそらく、下のように表示されるはずです。

選択ボタン（ラジオボタンとチェックボックス）
　次は、選択ボタンです。
　選択ボタンには二種類あります。
　複数個の中から一つだけを選択するボタンと複数個の中から任意の個数選択するボタンの二種類です。
　前者は「ラジオボタン」といわれ、後者は「チェックボックス」といわれます。

　実は、この選択ボタンも、「<INPUT TYPE="〜">」タグを使用します。
　ラジオボタンの場合は、「radio」を指定し、チェックボックスの場合は「checkbox」を指定します。
　また、選択ボタンの場合のオプションは、

となっています。
　気を付けるところは、「VALUE」オプションのところです。
　一行入力の時は、最初から表示される文字を指定するために使用していましたが、選択ボタンの場合は、選択された場合、転送されてくるデータを指定するために使用されています。

転送ボタンとリセットボタン
　さて、今までは書き込みの出来るフィールドやボタンを表示する方法を書いてきました。
　しかし、これだけではデータを送ってもらえません。
　そう、送るための「転送」ボタンや、今までに書いたことをやり直すための「リセット」ボタンが無いのです。
　リセットボタンの指定の仕方はどうするのでしょうか？
　「<INPUT TYPE="reset">」と指定するのです。
　リセットボタンにも「VALUE」オプションがあります。
　「VALUE」オプションを指定すると、リセットボタンのところに表示される文字を指定することが出来ます。
　（指定しない時は、「Reset」と表示されます。）
　また、文字の長さによって、ボタンの長さが変わるようになっています。

　それでは、転送ボタンの指定の仕方はどうするのでしょうか？
　「<INPUT TYPE="submit">」と指定するのです。
　転送ボタンにも「VALUE」オプションがあります。
　「VALUE」オプションを指定すると、転送ボタンのところに表示される文字を指定することが出来ます。
　文字の長さによって、ボタンの長さが変わるようになっています。
　また、転送ボタンを複数使用したい時は、「NAME」オプションを指定します。

今度は選択メニュー！
　今度は、選択メニューです。
　あちらこちらのホームページを見ると見つけると思いますが、逆三角ボタンの表示された選択肢のあるメニューが、選択メニューといいます。
　この選択メニューを表示するには、「<SELECT></SELECT>」タグと「<OPTION>」タグを使用します。
　「<OPTION>」タグは、表示させる内容を指定します。
　「<OPTION option>」と、オプションを指定することによって、色々な状態を指定することが出来ます。
　オプションに指定するものは、以下の通り。

　「<OPTION>」タグは、「<SELECT></SELECT>」タグで挟んで使用します。
　これで「<OPTION>」タグで指定した内容が選択メニューとして表示されます。
　それでは、「<SELECT></SELECT>」タグで指定することが出来るオプションは以下の通り。
　「<SELECT></SELECT>」タグは「<FORM></FORM>」タグで挟んで使用します。

「<FORM>」タグについて
　さて、ここまでいろいろと説明してきましたが、いくら今までのタグをうまく設定できても、情報を受け取ることが出来なかったと思います。
　それもそのはず、情報を受け取る方法をまだ教えていないのですから・・・
　情報を受け取るには、二つの方法があります。

　この二つを行うために、「<FORM>」タグに「ACTION」オプションと「METHOD」オプションを使用します。

　まずはメールで受け取る場合の指定方法です。
　メールで受け取る場合は、「ACTION」オプションに「mailto:メールアドレス」を指定し、「METHOD」オプションに「post」を指定します。
　私のメールアドレス（hiroshi@cds.ne.jp）を元に例を下に書きます。
<FORM ACTION="mailto:hiroshi@cds.ne.jp" METHOD="post">
名前：<INPUT TYPE="text">
<BR>
パスワード：<INPUT TYPE="password">
</FORM>
　ここでは送信ボタンがありませんが、送信ボタンを作成し、内容入力後に送信ボタンを押せば、入力内容が指定したメールアドレスに送信されるはずです。
　メール送信を指定した場合、気をつけてほしいのは、情報が変換されているため、最初にデコード（解読）作業を行わなければならないということです。
　ここでは説明を割愛させていただきます。

　次にＣＧＩに送信する方法です。
　（ＣＧＩについてはここでは説明しません。）
　あちらこちらのホームページに行くと、掲示板を設置しているところが多いと思います。
　ＣＧＩに送信するには、メール送信と同じように「ACTION」オプションに「CGIアドレス」を指定し、「METHOD」オプションに「post」を指定します。

　いかだでしたか？
　これで、ホームページで使うタグ全てについて説明をしました。
　次回は、今までのを受けて、全体の追加情報です。

第八回目に戻る　　講座トップページに戻る　　第十回目に行く