PHPstep

トップページ > PHPでメール送信フォームを作ろう >

第二章 PHPでウェブアプリケーションを作ろう

PHPでメール送信フォームを作ろう1

PHPでプログラムを書いてメール送信フォームを制作してみましょう。 まずは、ユーザーに名前・メールアドレス・お問合せ内容を入力してもらうページから作成していきます。
※最終完成形はこちら→メール送信フォームサンプル

このレッスンで作るもの

このレッスンでは下記のようなメール送信フォームを作成していきます。

メール送信フォームサンプル





シンプルなお問い合わせフォームです。 早速作っていきましょう。

フォーム入力欄はHTMLで作る

まずは、ユーザーに名前・メールアドレス・お問合せ内容を入力してもらうページから作成していきます。 フォーム入力欄は、PHPを使わなくてもHTMLとCSSだけで作成することができます。

テキストエディタのメニューから[ファイル]→[新規作成]と選択して、新しいファイルを作成します。 [ファイル]→[名前を付けて保存]を選択して、「index.php」というファイル名で新規保存してください。 前回の「PHPファイルを作ってみよう」で作成したtest.phpをコピーして、 ファイル名を「index.php」と書き換えても良いでしょう。

いま作成したindex.phpに下記の内容を記述してください。 前回作成したtest.phpと共通するHTMLタグも多いので、 test.phpの内容をコピー&ペーストしてから書き換えても良いでしょう。

「お名前:」や「入力内容を確認する」などの部分以外は、すべて半角英数で入力します。 「form method」や「input type」といった単語同士を区切る空白も全角スペースではなく、かならず半角スペースで入力します。

サンプルソース:index.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>お問合せ内容の入力|メール送信フォーム</title> </head> <body> <form method="post" action="confirm.php"> <p><label>お名前:<br> <input type="text" maxlength="255" name="namae"> </label></p> <p><label>メールアドレス:<br> <input type="email" size="30" maxlength="255" name="mailaddress"> </label></p> <p><label>お問合せ内容:<br> <textarea name="naiyou" cols="40" rows="5"></textarea> </label></p> <p><input type="submit" value="入力内容を確認する"></p> </form> </body> </html>

入力が完了したら、index.phpを上書き保存してください。

ブラウザで表示確認してみよう

いま作成したindex.phpをブラウザで表示確認してみましょう。 下記の表示確認の手順は、そろそろ覚えてしまいましょう。

XAMPPによる動作確認手順
  1. XAMPPのコントロールパネルを立ち上げて、コントロールパネルの中のApacheをStartさせます。
  2. ブラウザを立ち上げてアドレス欄に http://localhost/sample/mailform/ と入力します。
  3. XAMPPのコントロールパネルやブラウザを立ち上げたままの状態なら、ブラウザの[更新]ボタンを押すだけで表示が切り替わります。

ブラウザの画面が、下記のように表示されれば成功です。

記述したソース内容を確認しよう

ここまでは、すべてHTMLのみで記述しています。 HTMLソースの内容を確認していきましょう。

文字コードを指定する

HTMLソース中の以下の部分は、このHTMLファイルの文字コードが「UTF-8」であることを宣言しています。

サンプルソース:index.phpの抜粋
<meta charset="UTF-8">

この一行を記述しておくことで、ブラウザで表示される際に正しい文字コードで表示されるようになり、文字化けが起こりにくくなります。 文字コードの指定を省略してもブラウザが自動判断をして文字化けしないケースもありますが、 日本語のウェブページを作成する際には、確実に文字化けを避けるために文字コードは必ず指定するものだと覚えておきましょう。

データ送信フォームはform要素で作る

データ送信フォームは、HTMLのform要素で作ります。<form>~</form>でひとつのフォームです。

サンプルソース:index.phpの抜粋
<form method="post" action="confirm.php">  :  : </form>

<form>~</form>の内側、つまりform要素の子要素には、input要素やtextarea要素などのフォーム部品を配置します。

お名前入力欄

お名前入力欄は、input要素にtype="text"という属性値を指定して一行テキストボックスを作成しています。

サンプルソース:index.phpの抜粋
<input type="text" maxlength="255" name="namae">

input要素はデータを入力するための要素ですが、type属性に指定する値により種類が変化します。 input要素にtype="text"を指定すると一行テキストボックスが作成されます。 maxlength="255"というのは、「入力できる最大文字数は255文字まで」という指定です。

メールアドレス入力欄

メールアドレス入力欄は、input要素にtype="email"という属性値を指定してメール入力ボックスを作成しています。

サンプルソース:index.phpの抜粋
<input type="email" size="30" maxlength="255" name="mailaddress">

input要素のtype="email"は、比較的新しい機能であるため、旧いブラウザの場合には対応していないことがあります。 旧いブラウザへの配慮が必要な場合には、type="email"ではなくtype="text" を指定しても良いでしょう。

お問合せ内容入力欄

お問合せ内容入力欄は、textarea要素で作成しています。 textarea要素を指定すると、複数行のテキストが入力できるテキストエリアが作成されます。

サンプルソース:index.phpの抜粋
<textarea name="naiyou" cols="40" rows="5"></textarea>

上記のHTMLソースでは、textarea要素にcols属性 とrows属性を指定していますが、これは入力されるテキスト量の目安を指定しています。 cols="40" rows="5"というのは、「横一行にだいたい40文字くらい、縦にだいたい5行くらい」という指定です。

これを超える量のテキストが入力できないということではなく、大体そのくらいのサイズのテキストエリアが作成されるということです。 テキストエリアは、ユーザー操作で入力欄をリサイズして拡げたり、スクロールバーで表示する行を調整できます。

データにはname属性で名前を付けておく

いま作成しているメール送信フォームには、[お名前]・[メールアドレス]・[お問合せ内容]という3つの入力欄があります。 これらの入力欄は、HTMLのinput要素やtextarea要素で作成していますが、 それぞれの要素にはname="namae"、name="mailaddress"、name="naiyou"という具合にname属性で名前を付けています。

サンプルソース:index.phpの抜粋
<form method="post" action="confirm.php"> <p><label>お名前:<br> <input type="text" maxlength="255" name="namae"> </label></p> <p><label>メールアドレス:<br> <input type="email" size="30" maxlength="255" name="mailaddress"> </label></p> <p><label>お問合せ内容:<br> <textarea name="naiyou" cols="40" rows="5"></textarea> </label></p> <p><input type="submit" value="入力内容を確認する"></p> </form>

name属性に指定する値は、その入力欄に入力されるデータの名前です。 データ名は制作者が自由に付けることができます。 制作者にとって分かりやすいデータ名を付けておくと良いでしょう。

ここで付けたデータ名は、これからプログラムの作成を進めていく際に重要な意味を持ってきます。 いまの段階では、送受信される[お名前]・[メールアドレス]・[お問合せ内容]の各データに、 namae・mailaddress・naiyouというデータ名を付けたということを覚えておいてください。

送信ボタンで次のページにデータを送る

上記のHTMLソースを記述して、フォーム入力ページはひとまず完成しました。 ブラウザ上に表示されている[入力内容を確認する]ボタンを押すと、 form要素のaction属性で指定された「confirm.php」というページへデータが送信されます。

ただし、この時点で http://localhost/sample/mailform/ の画面内の[入力内容を確認する]ボタンを押しても、下記のような画面が表示されます。

要求された URL は本サーバでは見つかりませんでした。

上記の画面は「送信先URLが存在しないのでデータを送信することができなかった」という意味のエラーメッセージです。 いま作成しているindex.phpの入力したHTMLソースでは、form要素のaction属性の値に「confirm.php」を指定しています。 これは、データの送信先URLとして http://localhost/sample/mailform/confirm.php というアドレスを指定しているということです。

サンプルソース:index.phpの抜粋
<form method="post" action="confirm.php">

しかし、現時点では指定した「confirm.php」はまだ存在していません。 そのため、[入力内容を確認する]ボタンを押しても、指定されたページが見つからずにエラーメッセージが表示されたのです。


  1. フォーム入力ページを作成する
  2. 送信されたデータを受け取る
  3. 変数に代入する
  4. 受け取ったデータを安全な文字列に変換する
  5. 未入力チェック機能をつくる
  6. 未入力チェック機能を洗練させる
  7. [前のページへ戻る]ボタンをつくる
  8. 入力内容確認ページを完成させる
  9. メール送信処理ページを作成する
  10. メール送信フォームを完成させる