未知の苦HTML解道 つまず紀行! <ホームページ作成支援>








 HOME >> 実践Jscript >> Javascript >> メール送信フォーム

♠ JavaScriptとは・・・

Webページに動的な処理をさせるスクリプト言語。
ブラウザは、Javascriptソースを直接解釈し、スクリプトを実行。

例:更新日の自動表示 >> e-Words様

 ◆ メール送信フォーム >> FORM属性
 ◆ FORMタグ必須属性 >> ACTION属性とinput type 

★ メール送信フォームの仕組み

(注)解説どおりに設置すれば機能しますが、当サイトの場合、下記のメールフォームは使えないようにしております。(あしからず)

 ぷららの場合

your name  
mail address
(必須)
 
url  
message 

  

世の中、タバコ愛好者は、方々から煙たがられていますが、「愛煙家」を対象に、「一言コメント」を求めるメールフォームの件名を「愛煙家の独り言」とFORMタグに設定したなら。メールフォームから送信すると、件名は自動的に「愛煙家の独り言」と入力されます。

管理人はメールに目を通すなり、相哀れみ、そして「共感」するでしょう(笑)。

世にも悲惨な?▼メール受信の作例です。

▲▼受信メールの件名は「愛煙家の独り言」になります▲▼


◆メールフォームから送信された受信メールの内容

差出人のヘッダ情報と入力されたコメント本文の受信例です。

From: *****@*****.or.jp ・・・差出人
Date: Sun, 27 Feb 2005 17:52:47 +0900 (JST) ・・・日時
To: ******@*****.plala.or.jp ・・・宛先
Subject: 愛煙家の独り言 ・・・件名


name=吸魔仙人
uri=入力がなければ空欄
comment=チワ。ケムラーは、肩身が狭いっすね。負けないぞー!?

◇メールフォームのソース表示

ポイント >> FORM TABLE TEXTAREA

<FORM ACTION="http://www**.plala.or.jp/******/****.cgi" METHOD="POST">
<input type="hidden" name="to" VALUE="****@****.plala.or.jp">
<input type="hidden" name="subject"
VALUE="愛煙家の独り言">
<TABLE border="0" SUMMARY="メールフォーム">
<TR><TD>your name </TD>
  <TD><input type="text" name="name" size="40" TABINDEX="1" ACCESSKEY="1"></TD></TR>
<TR><TD>mail address(必須) </TD>
  <TD><input type="text" name="from" size="40" TABINDEX="2" ACCESSKEY="2"></TD></TR>
<TR><TD>url </TD>
  <TD><input type="text" name="url" size="40" TABINDEX="3" ACCESSKEY="3"></TD></TR>
<TR><TD>message</TD>
  <TD><TEXTAREA name="comment"
cols="30" rows="4"
TABINDEX="4" ACCESSKEY="4">
</TEXTAREA></TD></TR>
<TR><TD>
<input type="submit" value="ソウシン"
TABINDEX="5" ACCESSKEY="5">
<input type="reset" value="リセット"
TABINDEX="6" ACCESSKEY="6"></TD></TR>
</TABLE></FORM>


◆ FORMタグ必須属性・・・ACTION属性input type ◆

<FORM ACTION="http://www**.plala.or.jp/******/****.cgi" METHOD="POST">
<input type="hidden" name="to" VALUE="****@****.plala.or.jp">
<input type="hidden" name="subject"
VALUE="愛煙家の独り言">

■ACTION属性

フォームデータを処理するCGIサーバ(URL)の指定

■METHOD属性

入力されたデータの送信方法
METHOD="POST"・・・フォームのみデータ送信。
デフォルトは
METHOD="GET"・・・URL+フォームデータをセット送信。

■NAME属性

入力するフィールド名・・・"to"や"subject"

■VALUE属性

入力フィールドに表示されるテキスト
 "****@****.plala.or.jp" "愛煙家の独り言"

■input type="hidden"・・・隠しフィールドの設定

"hidden"は、隠されるの意。
指定された値が、フィールド非表示のため、VALUE属性に設定した値を送信。

 "hidden"以外の値
 "text" "button" "password" "checkbox" "radio"
 "image" "submit" "reset" "file" 計10種類。

◆ FORMタグ内 TEXTAREA TABINDEX ACCESSKEYの意義

< !---TABLEタグ内 TR、TDタグの記述を割愛しております。---! >


<input type="text" name="name" size="40" TABINDEX="1" ACCESSKEY="1">
<input type="text" name="from" size="40"
TABINDEX="2" ACCESSKEY="2">
<input type="text" name="url" size="40"
TABINDEX="3" ACCESSKEY="3">

<TEXTAREA name="comment" cols="40" rows="4" TABINDEX="4" ACCESSKEY="4"></TEXTAREA>

<input type="submit" value="ソウシン"
TABINDEX="5" ACCESSKEY="5">
<input type="reset" value="リセット"
TABINDEX="6" ACCESSKEY="6">
</TABLE>

■TEXTAREA要素

複数行の入力フィールド作成。

■SIZE属性

フィールド幅の文字数設定。

■COLS属性

一行に入力可能な半角文字数の設定。

■ROWS属性

COLS属性で設定した行数の設定。

■input type="text"に対するNAME属性

送信されてきたデータを見るときの名称指定。
 作例は、"name" "url" "comment"。
 input type="hidden"に対するNAME属性と解釈が異なる。

■input type="submit"

"submit"は提出の意。データ送信ボタン

■input type="reset"

リセット、クリアボタン(必要に応じて設定)

■TABINDEX属性

タブキーによるフォーカス移動を可能にさせるインデックス番号の指定

■ACCESSKEY属性

アクセスキー。TABINDEX属性と併用。

ALTキー+英数字1=your nameの入力フォームに移動すると思います。

♣ メールフォームのVALUE属性に、メールアドレスを記述するようになっていますが、スパムメール業者の絶好の餌食になってしまいます。

♣ メールアドレスは、CGIプログラムに記述するタイプを利用し、スパムメールの防御が必要です。

■当サイトへのお問い合わせ等はコチラ >> メールフォーム

掲載内容に不備、疑問、誤り等が多々あると思います。ご指摘、ご指導の程、宜しくお願い申し上げます。(何卒、お手柔らかに)

 メールフォームが使えない方は >>  


■ぷらら提供メールフォーム

ぷららトップページ / プライベートホームページ >>
 Service Menu / ぷらら提供CGI >>
 メール送信を受け付けたい / メール送信CGI >>
 メール送信CGI



  実用ツール

HTML文法検証
HTML文書の文法チェックと採点

CSS文法検証
W3C CSS 検証サービス

IT用語辞典
IT用語検索
<< Back | ホーム | ▲Page Top | Next 掲示板の設置
Base template by WEBMAGIC  Copyright © 未知の苦HTML解道, all right reserved, since 2004. 8.25