HTML5メールフォームの作り方

質問

お世話になります。HTML5のテンプレートを使用してメールフォームを作成しようとしておりますが、なかなかうまくいきません。action=""にメールアドレスを入れてみましたが、できませんでした。どなたかお分かりの方いらっしゃいましたら、どうかよろしくお願い致します。

<form id="contact" action="contact.html" method="post">
<div class="form_settings">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
<p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"></textarea></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="send" /></p>
</div>
</form>

回答No.3

youtoyuku · ベストアンサー

既に他の方がいうようにメールフォームなどはCGIやPHPを使うと、より便利です。

それを踏まえたうえでですが、まず、うまくいかない原因として<divタグの位置です。書き換えています。

<div class="form_settings">
<FORM action="mailto:送信先アドレス" method="POST" name="WMMailForm" enctype="text/plain" onsubmit="return WMValidationForm(this);">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
<p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"></textarea></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="send" /></p>
</form>
</div>

回答No.2

tracer

「できない」というのは具体的にどういうことを指していますか？
デザインが思い通りにならないということでしょうか。あるいは、実際に送信して指定のメールアドレスに届かないということでしょうか？
仮に後者の意味なら、話は明快です。
フォームの送信処理は、HTMLだけではできません。
つまり、HTMLをどうこうしたところで問題は解決しません。
フォームを稼動させるには、送信を受けるサーバー側のプログラムが別途必要です。
サーバーのプログラムとは、一般的にPHPやPerlなどのHTML/CSSとは別の言語が用いられますが、一般の方がいきなり利用されるには障壁が多いと思われます。

回答No.1

ORUKA1951

<form action="[プログラム]" method="post|get">
・・・[プログラム]には、通信プロトコルとサーバー、プログラムファイル名が入ります。
http：//hoge.com/cgi/mail.cgi
とか
../cgi/mail.cgi
ですかね。HTTPプロトコルで、そのサーバーのmail.cgiというプログラムにデータを送りつけます。
HTML4.01仕様書17.3 FORM要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#edef-FORM )

HTML5の場合は、フォームに関してはdatalist要素や、多くの属性が追加されていますが、基本的には変わりません。→新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

★示されたテンプレートは、HTML5ではありません。というより、HTMLからは程遠い、とんでもないものです。
　HTML5が、HTML4.01と、もっとも大きく変わったのは、文書構造の明確化です。これはHTML5の最も重要な根幹に関わる部分です。
　すなわち
<form action="[URI]">
　<div class="mailForm">
　　<dl>
　　　<dt>お名前</dt>
　　　<dd><input type="text name="name value="" size="20"></dd>
　　　<dt>
・・・・・・・・・・・
とか、
<form action="[URI]">
　<table>
　　<tbody>
　　　<tr>
　　　　<th>お名前</th>
　　　　<td><input type="text name="name value="" size="20"></td>
　　　</tr>
　　　<tr>
　　　<th>
・・・・・・・・・
とか、です。
　<span>&nbsp;</span>とかありえないですし、<input class="contact" のような場所にclassは不要です。HTML5が解釈できるブラウザでしたら、子孫セレクタや属性セレクタでスタイルシートは設定できます。

CGI自体については、
CGI RESCUE - CGIフリーソフト ( http://www.rescue.ne.jp/ )
　→CGI RESCUE チャレンジＣＧＩ - 初心者向けミニ講座 ( http://www.rescue.ne.jp/cgi/beginners/ )
などを勉強してください。