入力ページを作成する
ワークショップ第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