簡単ホームページをメモ帳で作ろうよ


第22回:フォームを作ろう(その2)

<nifty:FROM40PC/MES/15/1440>フォームの基礎

選択メニューを作ろう

選択メニューとは、たとえばこんなフォームのことです。


この▼の部分をクリックすると、下のように選択項目が現れます。


ここでもちろん、「20歳代」を選びたいですから、そこをクリックしますと、


となり、項目名の「20代」が反転表示(青地に白の文字)されます。これが洗濯ゴシゴシ、いやいや、選択フォームと言われるものです。こんなフォームを作ってみましょう。
このようなフォームを作るには <FROM>~<FORM>の中に、次のタグをはさみます。

選択フォームを作る

<SELECT NAME="グループ名"><OPTION VALUE="項目名">~</SELECT>

グループ名には選択項目の名前を書きます。これは、複数の選択フォームを作ったときに、相手が送ってきた選択データがどの選択フォームの中のデータなのかを区別しやすくするための手がかりとなります。選択フォームを一種類しか作らない場合は無理には必要ありません。二種類以上の選択フォームを作る場合に必要です。
項目名には選択項目の名前を書きます。上のイメージのような選択フォームでしたら、次のようなタグを書いています。


みつりんの自称年齢は(^○^):
<form>
<select name="age">
<option value="miman">
10歳未満
<option value="10">
10代
<option value="20">
20代
<option value="30">
30代
<option value="40">
40代
<option value="50">
50代
</select>
</form>


適当な名前を付けて保存し、ブラウザで開いてみましょう。上のように表示されれば正解です。
ところで、このタグの例ですと、ページを読み込んだときの選択項目名は必ず「10歳未満」が表示されます。



これを、たとえば、相手が選択をする前に、最初から指定した項目を表示させるようにすることもできます。
いくつかある選択項目の中で、あらかじめ特定のものを選択させておきたいときは、<OPTION>のところにちょっと手を加えて次のようにします。どこが違っているか、すぐ分かりますよね。


みつりんの自称年齢は(^○^):
<form>
<select name="age">
<option value="miman">
10歳未満
<option value="10">
10代
<option value="20"
selected>
20代
<option value="30">
30代
<option value="40">
40代
<option value="50">
50代
</select>
</form>



適当な名前を付けて、ブラウザで開いてみてください。ページを読み込んだときに、「20代」が表示されているはずです。selected というオプションが追加されると、その項目があらかじめ選ばれて表示されるようになるわけですね。

さて、基本的なフォームの作り方はこれくらいにして、今までのおさらいをしてみましょう。
次のようなタグを作ってみました。
forms.htm とでも名付けて保存し、ブラウザで開いてみましょう。

*6行目の "mailto:メールアドレス" の部分を修正してください。
 あなたのメールアドレスが from40pc@nifty.com であれば、
 "mailto:from40pc@nifty.com" となります。""の符号などは半角です。
      ↑このメールアドレスは架空のものですので、真似しないでね。


<html>
<head><title>フォームタグで遊ぶでぇ</title></head>
<!--実際にフォームタグで自分宛に送ってみよう-->
<body>
よろしければ、感想とあなたのことを少し教えてください。
<form action="mailto:メールアドレス" method="POST" enctype="text/plain">
面白かったページはど~れ:
<br>
<input type="checkbox" name="vba" align="middle">
簡単VBA講座
<br>
<input type="checkbox" name="msdos" align="middle">
簡単MS-DOSコマンド基本講座
<br>
<input type="checkbox" name="homep" align="middle">
簡単メモ帳でホームページ作成基本
<br>
<input type="checkbox" name="jisaku" align="middle">
簡単PC自作講座
<br>
<input type="checkbox" name="hagaki" align="middle">
簡単ハガキ大の紙工作講座
<br>
<input type="checkbox" name="softs" align="middle">
簡単通信ソフトマスター講座
<p>
ご感想をお願いします。:(半角カナはダメ、ダメ)
<br>
<textarea name="kanso" rows="6" cols="60" align="bottom">
</textarea>
<br>
あなたのメールアドレス:
<input name="mailadd" size="50" align="middle">
<br>
性別:
<input type="radio" name="gender" value="男性" align="middle">
男性
<input type="radio" name="gender" value="女性" align="middle">
女性
<input type="radio" name="gender" value="秘密" align="middle">
教えない(^○^) 
あなたの年齢:
<SELECT name="age" height="1" align="top" size="1">
<option value="under10">
10歳未満
<option value="10">
10代
<option value="20">
20代
<option value="30">
30代
<option value="40" selected>
40代
<option value="50">
50代
<option value="60">
60代
<option value="70">
70代
<option value="80">
80歳以上
</select>
<p>
上記の内容を送信するには[送信]を取りやめるには[取消]を
クリックしてください。
<br>
<input type="submit" value="思い切って[送信]しちゃいます">
<input type="reset" value="やっぱり[取消]しちゃいます">
</form>
</body>
</html>

適当な名前をつけて保存し、ブラウザで開いてみましょう。
6行目のメールアドレスが正しく書かれていて、インターネットに接続中の状態ならば、メールソフトが起動し、フォームに入力した内容を実際に送ることができます。

なお、送信ボタンを押した時、メールソフトの設定画面が出ることがあります。その場合はブラウザが起動させるメールソフトの設定が未完成のままですので、メールソフトの設定を済ませてから再挑戦してみましょう。
また、上のサンプルタグの中のメールアドレスを修正しないままで送ると、メールが不達で戻ってきてしまいますので、どうぞご注意を。

メール機能を使ってフォーム内容を転送するとき、メールアドレスが送信相手に明かされるなどの注意喚起のメッセージが出る場合もあると思います。

ご自分宛にフォーム内容を送信するなら問題は少ないでしょうから、ぜひ実験してみてください。

さて、きちんと送信できたなら、たとえば次のようなメールが届くはずです。

(Internet Explorer の場合の例)

To: あなたのメールアドレス
Subject: Microsoft Internet Explorer から投稿されたフォーム

vba=on
msdos=on
homep=on
jisaku=on
hagaki=on
softs=on
kanso=(入力された感想文)
mailadd=(入力されたメールアドレス)
gender=(選択された項目名)
age=(選択された年齢)


(Netscape Navigator の場合の例)

Subject: Form posted from Mozilla
To: あなたのメールアドレス

vba=on
msdos=on
homep=on
jisaku=on
hagaki=on
softs=on
kanso=(入力された感想文)
mailadd=(入力されたメールアドレス)
gender=(選択された項目名)
age=(選択された年齢)



上の内容のうち、たとえば vba=on というのは、チェックボックスの vbaの項目にチェックが付いていることを知らせています。

ところで、このサンプルタグの上から6行目の部分で、
<form action="mailto:メールアドレス" method="POST" enctype="text/plain">
と書きました。                   ^^^^^^^^^^^^^^^^^^^^
enctype="text/plain" のオプションを書き忘れると、次のようなメールが送られてきてしまいます。


To: あなたのメールアドレス
Subject: Microsoft Internet Explorer から投稿されたフォーム

vba=on&msdos=on&homep=on&jisaku=on&hagaki=on&softs=on&kanso=%82%B1%82%EA%82%
CD%83e%83X%83g%82%C5%82%B7%81B%0D%0A%82%BF%82%E1%82%F1%82%C6%93%CD%82%A2%82%
C4%82%A2%82%E9%82%A9%82%C8%81B%0D%0A%82%D9%82%C8%81B&mailadd=from40pc@nifty.
com&gender=%94%E9%96%A7&age=20



暗号のように見える部分は、元々は日本語でテキストを入力した部分でした。フォームの内容を送信する場合は、特に指定しない限りはこの暗号のような文字( ASCII CODE アスキーコードと呼びます)で送られます。
そこで、enctype="text/plain"という属性を付けてあげることで、フォームの内容が元の日本語に変換されてから送られるようになるようです。

ちなみに、上の暗号を変換してくれるソフトがフリーソフトとして公開されています。それを使って変換してみると、ほーらこんな感じに変換されます。

vba=on
msdos=on
homep=on
jisaku=on
hagaki=on
softs=on
kanso=これはテストです。
ちゃんと届いているかな。
ほな。
mailadd=from40pc@nifty.com
gender=秘密
age=20


では、フォームで遊ぼう編はここまでとします。次回はフレームで遊ぼうです。

Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson10
Lesson11 Lesson12 Lesson13 Lesson14 Lesson15 Lesson16 Lesson17 Lesson18 Lesson19 Lesson20
Lesson21 Lesson22 Lesson23 Lesson24 Lesson25 Lesson26 Lesson27 Lesson28 Lesson29 Lesson30

みつりんの簡単ホームページ講座トップ

トップページへ コマンドプロンプト VBAで遊ぼう パレットへ(注) ホームページ道場へ(注)
(注)@nifty会員のみご利用いただけます 30日で完成ホームページ本 ファイルの開き方

Since 15/06/1999
ホームページの内容の転載を禁じます made by mitsurin