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

ITかあさん

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


HTMLフォームの書き方

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

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

WEBデザイナーにフォームのマークアップをお願いすると、相当な割合で正しくフォームのマークアップが出来ていない人が多いので

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

formタグの正しい書き方

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

<form id="contact-form" action="./check.php" method="post">
</form>
action…フォームの入力内容の送り先。submitボタンを押した時の遷移先
method…postまたはgetを指定する。

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

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

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

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

action…actionは省略すると、入力内容の送り先が『自分自身』の意味になります
method…methodは書かないと、デフォルトではGetになります。

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

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

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

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

methodのpostとは郵便ポストのポストと同じだよ

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

私は次のページにフォームの入力内容を送りたい!
(action先に入力内容という手紙を送りたい)

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

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

反対にgetとはデータをゲットしたい

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

・メールフォームはpost
・検索フォームならget

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

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

今回は初めてのメールフォームということで、textパーツと長文テキスト用のtextareaの2つしか使いません。
(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>

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

・name属性だけは絶対に省略しない

以上。

value値について

・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の入力値チェックを使ったプロっぽいかっこいいフォームに仕上げましょう。

ページ: 1 2 3 4 5 6 7