さて、今回と次回はフォームを作る練習をやりたいと思います。フォームというのは、そのページを見た人が、直接テキストを入力したり、ボタンを選んでチェックマークを付けたりできるようになっているページの一部のことです。たとえば、こんなページかな。
ちょっとしたアンケートの回答や、短いテキストを入力してもらって、それをメールソフトで転送するという方法なら、初心者の方でも比較的簡単に作ることができますので、まずは、さまざまなフォームと部品の作り方の基本から覚えていただきましょう。
<FORM>～</FORM>
フォームをブラウザで表示させるための一番基本的なタグです。これだけでは意味をなさないので、このタグの間にフォームの内容を指定するタグを挿入することになります。ボタンを表示させたい場合はボタンのタグを、テキストを入力させたい場合はテキスト入力領域を作り表示させるタグを、といった具合です。たとえば、次のようなものがあります。
<INPUT TYPE="radio" name="ジャンル名" value="項目名">
ラジオボタンで項目をひとつだけ選ぶ
これでラジオボタンを作ります。これを<FORM>～</FORM>タグの中にはさみます。name="ジャンル名"の部分は、どんな内容の選択項目かを識別させる名前です。value="項目名"の部分は、選択されたボタンの名前です。
これは、いずれかひとつの項目だけを選ぶときに使うラジオボタンのタグということですね。では、今度は複数の項目にチェックを入れる場合を説明します。複数の選択をしてもらう時には、次のようなタグを用います。
<INPUT TYPE="checkbox" name="ジャンル名" value="項目名">
チェックボックスで複数項目を選択する
これをチェックボックスと言います。これはたとえば、複数項目にチェックを入れてほしい時に使えます。
では、ここまでの内容をおさらいするタグを書いてみたいと思います。forma.htm とでも名付けて保存し、ブラウザで確認してみましょう。まだフォームの内容を送信するためのボタンの作り方を説明していませんので、今回はラジオボタンとチェックボックスが表示されて、選択することができるだけね。
サンプルタグ（フォームに関係のないタグは省いています）
次の中で自称二十歳の好青年は誰でしょう。<br>
○をひとつだけクリックしてください。<br>
<form>
<input type="radio" name="seinen" value="honch">ほんち
<input type="radio" name="seinen" value="hide">ひで
<input type="radio" name="seinen" value="yuu">夜郎
<input type="radio" name="seinen" value="igachin">いがちん
<input type="radio" name="seinen" value="mitsurin">みつりん
</form><p>
ホームページの中で面白かったコーナーを教えてください。<br>
（複数選択可能です）<br>
<form><input type="checkbox" name="corner" value="honch">
ほんちの出張でドン！<br>
<input type="checkbox" name="corner" value="hide">
ひでの自作でポン！<br>
<input type="checkbox" name="corner" value="yoro">
幽のデジカメでゴン！<br>
<input type="checkbox" name="corner" value="mitsurin">
みつりんの二十歳でワン！<br>
<input type="checkbox" name="corner" value="nyanco">
にゃんこのゲームでニャン！</form>
上の例の場合、最初のフォームでは好青年の項目の選択をするのでname="seinen" としました。value=""の部分には選択した項目の名前をそのままローマ字で入れましたが、日本語でも構いません。後半の部分では複数項目の選択で、コーナーを選択してもらうのでname="corner" としました。その後に選択項目の名前をローマ字で value=""の部分に記述してます。日本語でも構いません。
なお、 name="" と value="" の部分がなくてもボタンは表示されますが、選択した結果をメールで送信してもらったときに、どのボタンやボックスが選択されたのかを判別するための手がかりとして、これらの名前が必要になります。
テキスト入力領域のフォームを作る
では、こんどはテキスト入力エリアを作ってみましょう。
一行入力か、複数行入力によって異なるタグを用います。
<INPUT TYPE="text" NAME="名前１" VALUE="名前２">
一行テキスト入力の場合
名前１と名前２は、さきほど説明したとおり、ここに入力した内容をページ作成者に送信するとき、送られた内容を解析するときの手がかりになるのが名前１，実際に送られてくる項目名が名前２です。<INPUT TYPE="text">の部分を<INPUT TYPE="password">に変更すると、入力した文字が、伏せ字になります。
<TEXTAREA ROWS="行数(縦)" COLS="文字数(横)" NAME="名前１">～</TEXTAREA>
複数行テキスト入力の場合
ホームページの感想や意見などの複数行のテキストを入力してもらう場合に使えるタグです。前にも出ましたが、ROWは行(縦の並び)のことで、COLは列(横の並び)のことです。テキスト入力エリアを作る場合、入力欄のサイズを指定が可能です。NAME="ジャンル名"の部分は、フォームを送ってもらったときに、どのフォームのデータなのかを判別するための手がかりとする名前です。NAME="KANSO" とでもすれば、感想のデータが届いていることが容易に分かりますよね。
では、ここまでを簡単にまとめたタグを書いてみます。
<form>
お名前：
<input type="text" name="namae" size="20"><br><br>E-mail：
<input type="text" name="mailadd" value="FROM40PC:" size="50"><p>
ホームページをご覧いただいた感想などを<br>
最後にお聞かせください。<br>
<textarea rows="10" cols="60" name="kanso">感想をどうぞ：</textarea>
</form>
form3.htm とでも名付けて保存し、ブラウザで開いてみてください。こんな感じで表示されるはずです。適当に名前や感想文を入力してみてください。
送信ボタンとリセットボタンを作る
さて、今日の最後は、送信ボタンとリセットボタンを作ります。上のようなフォームを作っても、送信できないと意味がないので、そのためのボタンを作りましょう。
まずはリセットボタンを作ります。
<INPUT TYPE="reset"> または
<INPUT TYPE="reset" VALUE="ボタンの名前">
これだけでオッケーです。単に、<INPUT TYPE="reset">とだけ書くと、「リセット」または「Reset」という名前のボタンが出来上がります。別の名前に変えたいときに、VALUE="" を用いて名前を付けます。たとえば、リセットボタンの名前を「ここを押すとリセットします」に変更したいなら、VALUE="ここを押すとリセットします" と書けば良いわけですね。
次に送信ボタンを作りましょう。
<INPUT TYPE="submit"> または
<INPUT TYPE="submit" VALUE="ボタンの名前">
これもリセットボタンと同じ作り方ですね。では、さきほどの forma.htm にリセットと送信ボタンを追加したタグを書いてみて、今回はこれまでとします。
<form>
お名前：
<input type="text" name="namae" size="20"><br>
<br>E-mail：
<input type="text" name="mailadd" value="FROM40PC:" size="50"><p>
ホームページをご覧いただいた感想などを<br>
最後にお聞かせください。<br>
<textarea rows="10" cols="60" name="kanso">感想をどうぞ：</textarea><p>
<input type="reset" value="取消する"><br>
<input type="submit" value="送信する">
</form>
これを form4.htm とでも名付けて保存して、ブラウザで確認してみてください。VALUE=""の部分には、あらかじめ指定した内容を入力エリアに書き込んでおくときにも使えます。
なお、上のフォームを実際にメールで送信するためには、環境設定のタグを追加する必要があります。
上のサンプルタグにはまだそれがないため、送信ボタンを押しても何も起こりません。そこで、次回は実際にフォームをメールで送れるように環境設定のタグを追加して、自分宛のフォーム送信に挑戦してみようと思います。
