###### tags: `ready for review`

# 入力画面、確認画面、完了画面を実装しよう
今回はよくあるお問い合わせフォームを実装していきます。

使用するファイルをGitHubからクローンしてください。

## 入力画面を実装しよう
まずは、入力画面となるindex.phpを実装していきます。
index.phpの要件は

1. formをhttpメソッドのPOSTで送信するとconfirm.phpに遷移する
2. 入力した内容をcontentというキーで受け取れるようにする 入力できる文字数は140文字以内とし、入力した内容を改行できるようにする

です。
それでは要件に従って実装していきます。

1つ目の要件は`formをhttpメソッドのPOSTで送信するとconfirm.phpに遷移する`なので、
formタグにaction属性とmethod属性が必要になります。
action属性に遷移先、method属性にhttpメソッドを指定します。
buttonは`送信`だけでも問題ありませんが、確認画面に遷移するので
`入力内容を確認する`としておきます。

<form action="confirm.php" method="POST">
  <button>入力内容を確認する</button>
</form>

2つ目の要件は`入力した内容をcontentというキーで受け取れるようにする 入力できる文字数は140文字以内とし、入力した内容を改行できるようにする`です。
少し難しいように感じますが、1行で実装することができます。
テキストボックスはinputタグもしくはtextareaタグで実装します。
今回は入力した内容を改行できるようにしなければならないでのtextareaタグを利用します。
入力できる文字数を制限するには`maxlength`属性を利用します。
送信する内容にキーをつけるには、前章で紹介したname属性を利用します。
これらを組み合わせると1行で実装することが可能です！

<form action="confirm.php" method="POST">
  <textarea name="content" maxlength="140"></textarea>
  <button>入力内容を確認する</button>
</form>

これでindex.phpは完成です。

## 確認画面を実装しよう
次はconfirm.phpを実装していきます。
confirm.phpの要件は

1. formをhttpメソッドのPOSTで送信するとcomplete.phpに遷移する 戻るボタンと送信ボタンを設置してください
2. index.phpから送信されてきた内容を取得し、表示する

です。

1つ目の要件は`formをhttpメソッドのPOSTで送信するとcomplete.phpに遷移する 戻るボタンと送信ボタンを設置してください
`なので、
formタグ内にaction属性で遷移先、method属性でhttpメソッドを指定する必要があります。

<form action="complete.php" method="POST">
  <div>
    <button>戻る</button><button>送信</button>
  </div>
</form>

2つ目の要件は`index.phpから送信されてきた内容を取得し、表示する`です。
送信されてきた値は`$_GET`もしくは`$_POST`のどちらかで取得できます。
今回はindex.phpからhttpメソッドがPOSTで送信されてきているので`$_POST`を使用します。

<form action="complete.php" method="POST">
  <div>
    <?php echo $_POST["content"] ?>
  </div>
  <div>
    <button>戻る</button><button>送信</button>
  </div>
</form>

これで完成のように見えますが、このまま送信してしまうとindex.phpで入力した内容がcomplete.phpに送信できません。
index.phpから送信されてきた内容をtextareaタグで囲い、そのタグのname属性にcontentというキーを割り当てましょう。

<form action="complete.php" method="POST">
  <div>
    <textarea name="content" readonly style="white-space: normal">
      <?php echo $_POST["content"] ?>    
    </textarea>
  </div>
  <div>
    <button>戻る</button><button>送信</button>
  </div>
</form>

確認画面で送信された内容を変更されると困るので、`readonly属性`を付与しています。
complete.phpに送信するときに余計なスペースが含まれるのを防ぐために`style="white-space: normal"`という装飾をしています。

最後に戻るボタンを実装するのですが、その前にbuttonタグについて解説します。
buttonタグはクリックした時に何かをさせる時によく用いられます。
特別な処理を記述していない限り、ボタンを押しても何も起きません。
しかし、formタグ内では送信ボタンとして扱われます。

confirm.phpで記述した戻るボタンは見かけ上、戻るボタンですが、
送信ボタンとして扱われます。
つまり、送信ボタンが2つ存在するという状況です。

formタグ内で送信ボタン以外の振る舞いをさせたい場合は、`type属性`を指定する必要があります。
今回はtype属性にbuttonを指定します。
次に、クリックしときに何か処理をさせるときに利用する`onclick属性`を指定します。
onclick属性には`history.back(-1)`を指定します。

<form action="complete.php" method="POST">
  <div>
    <textarea name="content" readonly style="white-space: normal">
      <?php echo $_POST["content"] ?>    
    </textarea>
  </div>
  <div>
    <button type="button" onclick="history.back(-1)">戻る</button><button>送信</button>
  </div>
</form>

ここまでできたらindex.phpからconfirm.phpに遷移し、戻るボタンを押してindex.phpに戻れるか確認してみましょう！

## 完了画面を実装しよう
最後にcomplete.phpを実装していきます。
complete.phpの要件は

1. 送信された内容を表示する
2. 「上記の内容が登録されました」と表示する
3. index.phpに戻れるようにする

です。
まずは1つ目の要件から実装していきましょう。
送信されてきた値を取得する方法はconfirm.phpで紹介しましたね。
今回も同様に`$_POST`で値を取得し、表示してみましょう。

<div>
  <?php echo $_POST["content"] ?>
</div>

2つ目と3つ目のの要件は簡単ですね。
どちらもHTMLだけで実装できます。

<div>
  <?php echo $_POST["content"] ?>
</div>
<p>
  上記の内容で登録されました
</p>
<a href="index.php">お問い合わせフォームに戻る</a>

基本的なお問い合わせフォームの形はこれで完成です！
1つのファイルで入力画面、確認画面、完了画面を実装することも可能なので気になる方は調べてみましょう！