PHPプログラミング

ベストプラクティス

フォームを作る vol.1

フォームの基本構造を作成する

  • このエントリーをはてなブックマークに追加

フォームを作成するシリーズ記事の第1段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材に解説していきます。

目次

  1. #  人と人を繋ぐ大切なフォーム
  2. #  フォームの基本構造
  3. #  入力ページを作成
  4. #  受け取ったフォームデータを確認する

人と人を繋ぐ大切なフォーム

Webサイトやアプリケーションにおいて、運営側への窓口となるフォーム。利用者を運営者やシステムへと繋ぐ機能を持ち、非常に多くのWebサイトが何かしらのフォームを用意しています。

よく見かけるのは問い合わせ、応募、注文受付など。会員制のサイトであれば、新規登録、ログイン、情報変更、退会の各種申請でもフォームが使われています。

このように様々なシーンで活用することができるため、フォームの作り方を理解しておくと便利です。そこで、これから記事を数回に分けて、次のような基本的な機能を持つフォームを作成します。

  • 入力された内容をメールにして管理者へ送信
  • 自動返信メールを送信
  • 入力された値が正しい形式かを確認(バリデーション)
  • ファイル添付
  • 二重送信の防止

フォームの入力形式についても単純なテキスト入力のみではなく、ラジオボタン、チェックボタンなど各種対応していきます。

以上の機能を持つフォームが完成するときには、スーパーグローバルやセッションの扱い方、ファイルアップロード、メール送信、セキュリティに関する基礎知識まで、これら全ての扱い方を一通り習得することができます。

なお、ここから先はPHPプログラミングについて基礎は理解していることを前提に進めていきます。もし「$_POST」などのスーパーグローバルについて自信がない方は、入門編の「第4章 スーパーグローバル」に目を通しておくこと今後スムーズに進められるかもしれません。

フォームの基本構造

これから作るフォームは、次の3ページ構成になります。

フォームの基本構成イメージ

  • 入力ページ – 「氏名」や「メールアドレス」などを入力
  • 確認ページ – 入力した内容を確認
  • 完了ページ – 送信完了したらメッセージを表示

必要なページは上記の3ページですが、表示を切り替えていく形での実装になるため、実際に作成するのは1ファイルです。

入力ページを作成

それでは実際にファイルを作成し、コードを書いていきましょう。
今回はベースとなる部分のみにフォーカスし、まずは(1)入力ページから作成していきます。
index.php」というファイルを新しく作成し、次のHTMLコードを書いてください。

※今回作成するファイルは、ページ下部よりダウンロードすることができます。

index.php

<!DOCTYPE>
<html lang="ja">
<head>
<title>お問い合わせフォーム</title>
<style rel="stylesheet" type="text/css">
body {
	padding: 20px;
	text-align: center;
}

h1 {
	margin-bottom: 20px;
	padding: 20px 0;
	color: #209eff;
	font-size: 122%;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

input[type=text] {
	padding: 5px 10px;
	font-size: 86%;
	border: none;
	border-radius: 3px;
	background: #ddf0ff;
}

input[name=btn_confirm],
input[name=btn_submit],
input[name=btn_back] {
	margin-top: 10px;
	padding: 5px 20px;
	font-size: 100%;
	color: #fff;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	box-shadow: 0 3px 0 #2887d1;
	background: #4eaaf1;
}

input[name=btn_back] {
	margin-right: 20px;
	box-shadow: 0 3px 0 #777;
	background: #999;
}

.element_wrap {
	margin-bottom: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	text-align: left;
}

label {
	display: inline-block;
	margin-bottom: 10px;
	font-weight: bold;
	width: 150px;
}

.element_wrap p {
	display: inline-block;
	margin:  0;
	text-align: left;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<input type="text" name="your_name" value="">
	</div>
	<div class="element_wrap">
		<label>メールアドレス</label>
		<input type="text" name="email" value="">
	</div>
	<input type="submit" name="btn_confirm" value="入力内容を確認する">
</form>
</body>
</html>

表示結果

ブラウザでの表示結果

静的なHTMLページですが、「氏名」と「メールアドレス」を入力することのできるフォームを作成しました。今はまだ「入力内容を確認する」ボタンを押してもページが再読み込みされるだけです。

このHTMLで大事なポイントは2つ。form要素でメソッドと送信先を指定していることと、input要素のname属性を指定していることです。

form要素ではmethod属性で「post」を指定しているので、フォームデータを送信する際にはPOST通信になります。また、送信先を指定するaction属性は値が空なので、自分自身(index.php)を再度呼び出します。

input要素のname属性は、フォームデータを受け取る際に使います。

受け取ったフォームデータを確認する

次に、受け取ったフォームデータをvar_dump関数で確認してみましょう。
index.phpを開き、先頭に次のコードを追加してください。

index.php

<?php
var_dump($_POST);
?>

<!DOCTYPE>
<html lang="ja">
<head>
<title>お問い合わせフォーム</title>

~ 先ほどのHTMLコードが続く ~

入力したらブラウザを再読み込みし、適当に値を入力して「入力内容を確認」ボタンを押してみてください。すると、ページ上部に入力したデータがダンプ出力されます。

表示結果

入力した値がダンプ出力される

input要素につけたname属性が、そのままスーパーグローバル$_POSTのキーになっていることが分かります。このキーを使って入力された各値にアクセスしていきます。

次回は引き続き、(2)確認ページを作成していきましょう。

今回作成したファイル:ダウンロード(約0.9KB)

  • このエントリーをはてなブックマークに追加