初心者も分かるようPHPメールフォームを解説 ITかあさん

初心者も分かるようPHPメールフォームを解説

HTMLフォームの書き方

このページでは正しいHTMLフォームの書き方と、jQueryのフォームバリデーションについて説明します。
今回の完成品だと、こちらになります。

フォームについてはHTMLなのでそれほど説明することはないのですが、そもそもこのHTMLフォームが正しくないと次のページに入力内容を送ることが出来ません。
大変失礼ながら、

これを機会に正しいHTMLフォームのマークアップを覚えて下さい。

formタグの正しい書き方

以下が正しいformタグの書き方です。それぞれ属性について説明します。
formのidについては好きに設定していただいてかまいません。
jQueryのバリデーションで使います。

<form id="contact-form" action="./check.php" method="post">
</form>

ダメなフォームタグの書き方

ダメ！というより、省略すると意味が全く変わってしまいます。
(actionもmethodもどちらも設定しない。WEBデザイナーの方にformのマークアップさせると多い・・・)

<form id="contact-form">
</form>

以下の項目は省略すると、このように意味が変わります。

HTMLのお作法的にもこれらは省略するのは正しくありません。全ての属性を正しく設定して下さい。

methodがpostとget　どちらを指定したらいいか分からない！

私も、WEBデザイナーの時formのmethodはpostとget　どちらを指定したらいいのか分かりませんでした。
でも、当時の先輩から教えてもらって全く迷わなくなりました。

methodのpostとは郵便ポストのpostと覚える

こう先輩から教えてもらいました。

と、いう風に次のページに何かデータを送りたい、郵便ポストがイメージできるフォームの内容のmethodはpostと決まっています。
(私はpostを郵便ポストと一緒と聞いて目からウロコだったんだけど、皆さんはそうでもないですかね？)

methodのgetとは検索など情報をゲットする時

など、何か受け取りたいときはmethodのgetを指定します。
一応formのmethodは他にもあるのですが、普段WEBのマークアップやプログラムを書いて使うのはこの２つだけです。
基本的には

です。プログラマーになってからは当たり前すぎるんですが、WEBデザイナーの時はピンとこなかったな～

HTMLフォームのパーツの書き方

今回は初めてのメールフォームということで、textパーツと長文テキスト用のtextareaの２つしか使いません。
(checkboxとかselectはもう少し複雑になるのでそちらはまたの機会ということで。)

正しいフォームのパーツの書き方

以下は今回のメールフォームで使ったtextとtextareaです。

<input type="text"  name="name" value="">
<input type="text"  name="e_mail" value="">
<textarea name="comment" rows="4" cols="40"></textarea>

コピペするなり、自由に使っていただいてかまいませんが、何があっても以下のルールは守ってください。

以上。

value値について

なので、今回のケースだと、空のvalueを設定してあげるのがいいでしょう。

最後にsubmitボタンを設置して出来上がり

最後にsubmitボタンを設置してOKです。
なお、1 フォームにつき、ボタン、submitボタンは一つしか設置できません。複数設置しても、後からのボタンが有効になります。

<form id="contact-form" action="./check.php" method="post">
<input type="text"  name="name" value="">
<input type="text"  name="e_mail" value="">
<textarea name="comment" rows="4" cols="40"></textarea>
<input type="submit" value="確認画面へ" name="submit">
</form>

テーブルタグを使って成型します。

<form id="contact-form" action="./check.php" method="post">
<table>
<tbody>
<tr>
<th>お名前</th>
<td><input type="text" name="name" value=""></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="text" name="e_mail" value=""></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="comment" rows="4" cols="40"></textarea>
</td>
</tr>
</tbody>
</table>
<div class="bt">
<input type="submit" value="確認画面へ" name="submit">
</div>
</form>

これでプログラマーも納得のHTMLフォームの完成です。

では次のページでjQueryの入力値チェックを使ったプロっぽいかっこいいフォームに仕上げましょう。