Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.71 - アンケートフォームの作成


何か情報を収集したければ、もちろんアンケートです。


Step テーマ
● HTML フォーム関連

実行例


Tatsuya's Home Page アンケート

お名前(ニックネーム)

性別

面白かったコンテンツは? (いくつでも)
イヌでもわかるJavaScript講座
ネコでも知ってるInternet講座
おじさんのための用語講座

このホームページをどこで知りましたか?


ご意見・ご感想





リスト



Tatsuya's Home Page アンケート<BR><BR>
お名前(ハンドル名)
<INPUT type="text" size="20" name="name"><BR><BR>
性別
<INPUT type="radio" checked name="性別" value="男">男<INPUT type="radio" name="性別" value="女">女<BR>
<BR>
面白かったコンテンツは? (いくつでも)<BR>
<INPUT type="checkbox" name="best" value="inu">イヌでもわかるJavaScript講座<BR>
<INPUT type="checkbox" name="best" value="neko">ネコでも知ってるInternet講座<BR>
<INPUT type="checkbox" name="best" value="oyaji">おじさんのための用語講座<BR><BR>
このホームページをどこで知りましたか?<BR>
<SELECT name="where" size="1">
<OPTION value="Engine">検索エンジン</OPTION>
<OPTION value="Link">リンク集</OPTION>
<OPTION value="Magazine">雑誌</OPTION>
<OPTION value="Mail">メール</OPTION>
</SELECT><BR><BR>
ご意見・ご感想<BR>
<TEXTAREA name="kansou" rows="5" cols="65"></TEXTAREA><BR><BR>
<INPUT type="submit" value="送信">
<INPUT type="reset" value="クリア">
</form>


サンプルだけの HTMLは こちらへ

説明


[Q] 来訪者にアンケートをとって、そのデータをメールで送信するような JavaScript を教えてください。

前から この手のメールが たいへん多いので 今回はフォームの HTML講座です。 (^^;
相手のメールソフト経由でメールを送信してもらいます。つまり、相手にメールソフトがなければ、送信できません。 (^^;
メールソフトを使わずにメール転送したい場合は、どうしても、CGIというものが必要になります。。

【ご注意】
このサンプルは、相手のPCのメールソフト経由でメール送信する方法です。
ブラウザやメールソフトの環境によって、動作しない/文字化けになる 可能性が強いです。
メール送信に関しては、JavaScript や HTML だけでは できない と考えたほうが正解です。

【警告】
上記の注意事項の通りに 送信者が送信したくても送信できない、もしくは、正常に内容が送信されないケースは、かなりの確率で起きると思います。
商用目的であれば信用につながりますので、あくまでも 遊び の範囲内でお願いします。
ページ内にも「メールソフト経由なので、動かない可能性大」みたいな表示をいれておきましょう。



● フォームの説明 <FORM>

アンケートをとるためには、<FORM>〜</FORM>タグを使います。その中に各種フォームを入れ込みます。
<form action="mailto:tatsuya@red.oit-net.jp" method="post" enctype="text/plain">

action="mailto:メールアドレス"
送信先のメールアドレス、アンケートであれば 自分のメールアドレスを記入します。
mailto のとなりにコロン( : ) を付けて、つづけてメールアドレスを記入します。

件名を入れる場合は、
action="mailto:メールアドレス?subject=件名"
としますが、ブラウザに依存します。

method="post"
メールとして送信できる形にします。

enctype="text/plain"
データの送信形式を、テキスト形式に設定します。
指定すると、送信者の環境によっては、文字化けの可能性が発生します。
指定しなければ、エンコードされた形式で文字を送信します。デコードしないと読めません。エンコード、デコードは Step.63 参照



● 1行テキストフォーム <INPUT type="text">

名前や相手のメールアドレスといった、1行のデータを入力するには、テキストフォーム を使います。
<input type="text" size="20" name="nickname">

type="text"
このフォームは、テキスト入力フォームであることを指定します。

name="nickname"
送信時の見出しです。「山田太郎」と入力して送信した場合、メール内容は、
nickname=山田太郎
という感じで送られてきます。
以下、name="xxx" は、これと同じです。



● ラジオボタン <INPUT type="radio">

性別といった、いずれかを選んでもらうのは、ラジオボタンフォーム を使います。
<input type="radio" checked name="性別" value="男">男
<input type="radio" name="性別" value="女">女


type="radio"
このフォームは、ラジオボタンであることを指定します。

name="性別"
それぞれのラジオボタンに同じ名前をセットします。これでラジオボタンの グループ ができます。

checked
checked を入れておくと 初期選択値 になります。性別は「男」にチェックが入ります。
当然、この checked は name="性別" の グループにひとつしかセットできません。

value="xxx"
この文字がメールとして送信されてきます。
「女」にチェックして送信した場合は、
性別=女
という文字が送信されます。
以下、value="xxx" の文は、これと同じです。



● チェックボタン <INPUT type="checkbox">

複数チェック可能な項目を選んでもらうのは、チェックボタンフォーム を使います。
<input type="checkbox" name="best" value="inu">イヌでもわかるJavaScript講座
<input type="checkbox" name="best" value="neko">ネコでも知ってるInternet講座
<input type="checkbox" name="best" value="oyaji">おじさんのための用語講座

イヌでもわかるJavaScript講座
ネコでも知ってるInternet講座
おじさんのための用語講座
チェックされた項目がすべて、メールで送信されます。

type="checkbox"
このフォームは、チェックボックスであることを指定します。

こちらには複数の項目に checked を設定して初期選択状態にできます。

全てをチェックして送信した場合は、
best=inu
best=neko
best=oyaji
のようにメールが届きます。


● プルダウンメニュー <SELECT><OPTION>

ラジオボタンは、ほかに プルダウンメニューフォーム という形式でも表現できます。
<select name="where" size="1">
<option value="Engine">検索エンジン</option>
<option value="Link">リンク集</option>
<option value="Magazine">雑誌</option>
<option value="Mail">メール</option>
</select>

ラジオボタンで初期選択値は、checked で指定していましたが、こちらでは、<option>タグの中に、selected を使って指定します。

雑誌が選択されて送信した場合は、
where=Magazine がメールで届きます。



● 複数行テキストフォーム <TEXTAREA>

ご意見・ご感想といった、長文で改行可能な文章を入力してもらうには <TEXTAREA>〜</TEXTAREA> タグを使用します。
<textarea name="kansou" rows="5" cols="65"></textarea>

フォーム内に
aaa
bbb
ccc
を入力して送信した場合は、
kansou=aaa
bbb
ccc
がメールで届きます。


● 送信ボタン <INPUT type="submit">

送信ボタンを1つ作ります。
このボタンを押すと <form>で指定した方法でフォームデータを メールソフト経由でメール送信します。
<input type="submit" value="送信">
type="submit"
メール送信するボタンを作成します。

value="送信"
この value でセットした文字は、ボタンの上に表示する文字です。



● クリアボタン <INPUT type="reset">

クリアボタンを1つ作ります。
このボタンを押すとフォームに入力した内容が 消去 されて再度、入力のやり直しができます。
<input type="reset" value="クリア">
type="reset"
入力した文字などをフォームからクリアして、いちからやり直す時のボタンを作成します。

value="クリア"
この value でセットした文字はボタンの上に表示する文字です。

Q&A


[Q] [送信]ボタンを押せば何度でも送信できます。二重投稿防止策はありますか?
[A] 送信確認をします。

<form action="mailto:tatsuya@red.oit-net.jp" onSubmit='return confirm("送信します")' method="post" enctype="text/plain">

Q&A


[Q] 送信時に『このフォームは電子メールを使用して送信されます』といった警告ウィンドウが出ますが、それを出ないようにできますか?
[A] できません。

Q&A


[Q] 送信されてきたメールが文字化けしています。
[A] enctype="text/plain" を外して、デコードするしかないです。


 
イヌでもわかるJavaScript講座 お品書き へ戻ります