実行例

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はこちらへ

説明

[Ｑ] 来訪者にアンケートをとって、そのデータをメールで送信するような 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">

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

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

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

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

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

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

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

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

value="ｘｘｘ"
この文字がメールとして送信されてきます。
「女」にチェックして送信した場合は、
性別=女
という文字が送信されます。
以下、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">おじさんのための用語講座

チェックされた項目がすべて、メールで送信されます。

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 でセットした文字はボタンの上に表示する文字です。

▲TOP

Q&A

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

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

▲TOP

Q&A

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

▲TOP

Q&A

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

▲TOP

▲TOP

実行例

リスト

説明

Q&A

Q&A

Q&A