フォームからメールを送信する

フォームを使うと、ブラウザから入力した情報をメールとして送信することができます。ここでは、フォームに質問や意見などを入力するテキスト入力領域と送信用のボタンを作成し、ボタンクリックで自動的にメールを送信する方法について考えてみましょう。

■　フォームの定義

訪問者が情報を入力するためのテキスト入力領域と、送信ボタンを置くための定義を行います。

<FORM
ACTION="mailto:little-box@aw.wakwak.com"
METHOD="post"
ENCTYPE="text/plain"
onSubmit="location.href='thankyou.htm'">
<TEXTAREA NAME="body" ROWS="5" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="　送信　">
<P><FONT SIZE=-1>送信ボタンを押すと、Shirleyに メールが送信されます。</FONT><BR>
</FORM>

■　「action」プロパティ

フォームから送信するメールをフォームメールと呼びます。フォームメールを送信するには、<FORM>タグの「ACTION」プロパティに、送信先のメールアドレスを「mailto:メールアドレス」と設定します。この設定によって、送信ボタンをクリックしたときにフォームに入力された情報がメールソフトに渡され、設定したメールアドレスにメールが送信されます。

■　送信完了を知らせるページ

メールの送信が終わった後は、別のページを表示することで、訪問者にメールの送信が完了したことを知らせることができます。例では、「onSubmit="location.href='thankyou.htm'"」と記述して、メールを送信した後別のページを表示させています。「thankyou.htm」の部分を書き換えると、送信後に自分の指定したページを表示することができます。

※IE5.0やNN4.7では、「location.href」が有効でないため、上の方法では別のページを表示することができません。ページ内に別のページに移動するためのリンクを設定しておきましょう。

■　「submit」オブジェクト

フォームメールを送信するためのボタンは、「submit」オブジェクトを使用して作成します。このとき「submit」オブジェクトの定義は<FORM>~</FORM>の間で行います。また、送信ボタンに限らず、フォームに配置するテキスト入力領域やボタンなどのオブジェクトも<FORM>~</FORM>の間で定義します。このときフォームには下のようなオブジェクトを配置できます

オブジェクト	内容
テキスト領域入力	<INPUT TYPE="text">
メニュー	<SELECT>~</SELECT>
ボタン	<INPUT TYPE="button">
チェックボックス	<INPUT TYPE="checkbox">
ラジオボタン	<INPUT TYPE="radio">
送信ボタン	<INPUT TYPE="submit">

 

<<<戻る