HTMLとPHPでお問い合わせフォームの確認画面をつくってみる。
HTMLでフォームをつくる
<form>タグで骨格を作成
フォームを作りたい時は、HTMLの<form>タグを用います。
action属性にはデータを渡す先のURLを指定します。
今回は後ほど作成する「form.php」にデータを渡します。
method属性は値の送信の方法で、「get」と「post」のどちらかを指定します。getの場合は送信される値がURLに表示され、postの場合はURLに表示されません。
<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="form.php">
</form>
</div>
</div>
</div>テキストボックスを設置
テキストボックスをつくるにはHTMLの<input type="text">を使います。name属性は入力された値を取得するときに使う名前です。後にフォームのデータを受け取るときに使用します。<input>タグは閉じタグが必要ないことに注意しましょう。
改行を含む文章のためのテキストボックスをつくるにはHTMLの<textarea>タグを用います。
<input>タグと同様にname属性に、入力値を取得するときに使う名前を指定します。<textarea>タグは閉じタグが必要なので注意してください。
<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="form.php">
<div class="form-item">名前</div>
<input type="text" name="name" />
<div class="form-item">内容</div>
<textarea name="body"></textarea>
</form>
</div>
</div>
</div>セレクトボックスを設置
セレクトボックスをつくるには図のように<select>タグの中に<option>タグを並べます。
<option>タグの中身が選択肢として表示されます。
<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="form.php">
<div class="form-item">名前</div>
<input type="text" name="name" />
<div class="form-item">年齢</div>
<select name="age">
<option value="未選択">選択してください</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
</select>
<div class="form-item">内容</div>
<textarea name="body"></textarea>
</form>
</div>
</div>
</div>送信ボタンを設置
送信ボタンをつくるには<input type="submit">を用います。
value属性に指定された値がボタン上に表示されます。
<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="form.php">
<div class="form-item">名前</div>
<input type="text" name="name" />
<div class="form-item">年齢</div>
<select name="age">
<option value="未選択">選択してください</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
</select>
<div class="form-item">内容</div>
<textarea name="body"></textarea>
<input type="submit" value="送信" />
</form>
</div>
</div>
</div>PHPで確認画面をつくる
テキストボックスに入力された値を受け取る
フォームで送信した値を受け取るには「$_POST」を使用します。
「$_POST」は連想配列になっています。[ ]の中に、<input>と<textarea>のname属性に指定した値を入れることで、それぞれの送信した値を受け取ることが出来ます。
<div class="main">
<div class="thanks-message">お問い合わせいただきありがとうございます。</div>
<div class="display-contact">
<div class="form-title">入力内容</div>
<div class="form-item">■ 名前</div>
<?php echo $_POST['name']; ?>
<div class="form-item">■ 内容</div>
<?php echo $_POST['body']; ?>
</div>
</div>
</div>セレクトボックスの値を受け取る
セレクトボックスの値の渡し方を見てみましょう。
<select>タグには「$_POST」で値を受け取るためのname属性を指定します。
<option>タグのvalue属性が送信される値です。
<div class="main">
<div class="thanks-message">お問い合わせいただきありがとうございます。</div>
<div class="display-contact">
<div class="form-title">入力内容</div>
<div class="form-item">■ 名前</div>
<?php echo $_POST['name']; ?>
<div class="form-item">■ 年齢</div>
<?php echo $_POST['age']; ?>
<div class="form-item">■ 内容</div>
<?php echo $_POST['body']; ?>
</div>
</div>
</div>完成コード
以上でお問い合わせフォームとその確認画面が完成しました。
下記が完成形のコードになります。
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>お問い合わせフォーム</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="form.php">
<div class="form-item">名前</div>
<input type="text" name="name" />
<div class="form-item">年齢</div>
<!-- この下にselectタグを書いていきましょう -->
<select name="age">
<option value="未選択">選択してください</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
</select>
<div class="form-item">内容</div>
<textarea name="body"></textarea>
<input type="submit" value="送信" />
</form>
</div>
</div>
</body>
</html>[form.php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="main">
<div class="thanks-message">お問い合わせいただきありがとうございます。</div>
<div class="display-contact">
<div class="form-title">入力内容</div>
<div class="form-item">■ 名前</div>
<?php echo $_POST['name']; ?>
<div class="form-item">■ 年齢</div>
<!-- ageを受け取りechoしましょう -->
<?php echo $_POST['age']; ?>
<div class="form-item">■ 内容</div>
<?php echo $_POST['body']; ?>
</div>
</div>
</div>
</body>
</html>