お問い合わせフォームの入力ページを作成する

ワークショップ「お問い合わせフォームを作成する」の第1回目はお問い合わせフォームの入力ページのHTMLを作成します。

この記事のポイント

お問い合わせフォームの入力ページを作成する
フォームの入力データが実際に送信＆受信できるか確認する

入力ページを作成する

ワークショップ第1回目は、お問い合わせフォームを作成するファイルを作成し、基礎となるHTMLを作成していきます。

早速ですが、実際にファイルを作成してコードを書いていきましょう。
まず、「index.php」というファイルを新しく作成して、以下のHTMLコードを書いてください。

※今回作成するコードは以下のGithubのページからダウンロードすることができます。
vol.1のサンプルコード – Github

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ページですが、「氏名」と「メールアドレス」を入力することのできるフォームを作成しました。
今はまだPHPのコードは書いていませんが、「入力内容を確認する」ボタンを押すとフォームに入力したデータがform要素のaction属性に指定したURIへ送信されます。
action属性が空の場合は「index.php」自身に送信します。

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

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

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

フォームで入力したデータを受け取って表示する

次に、受け取ったフォームデータをvar_dump関数で出力して確認してみましょう。
index.phpの先頭にPHPコードを追加します。
追加するコードは赤色赤色の部分です。

index.php

<?php
var_dump($_POST);
?>

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

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

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

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

今回はここまでとなります。
次回は引き続き、確認ページと完了ページを作成していきましょう。

今回作成したコードはこちら：vol.1のサンプルコード – GitHub

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

お問い合わせフォームの入力ページを作成する

この記事のポイント

目次

入力ページを作成する

index.php

フォームで入力したデータを受け取って表示する

index.php

こちらの記事は役に立ちましたか？

記事一覧