HTML&CSS PHPを用いた掲示板作成で、確認画面を表示したい

つい2週間ほど前からプログラミングの勉強を始めたド初心者です。
現在、HTML&CSS PHPを用いた掲示板を作成しています。
目指す完成形は、
①（HTML&CSSを用いて）名前、投稿内容入力フォーム、送信ボタン
②（PHPを用いて）送信ボタンを押した後、「投稿が完了しました！」というメッセージとともに、入力した名前、投稿内容を表示
という機能です。
①までは順調に終えました。
現在は、"standpower.com/php_form.html""http://www.standpower.com/input.html"のサイトを参考に②の作業をしています。
このサイトではブロックのような感じになっていますが、ブロックのような要素はいりません。
なのでブロックの要素を取り除いて、確認画面を作りたいのですが、送信した後の画面がエラーになり、コードが表示されてしまいます。
コードは

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>掲示板</title>
6  <meta name="description" content="けいじばん！">
7  <link rel="stylesheet" href="keijiban.css">
8</head>
9
10<body>
11  <div class="center">
12  <h1>掲示板</h1>
13  <p>新規投稿</p>
14  <form action="output.php" method="post">
15  お名前:<br><input type="text" name="name"><br>
16  投稿内容:<br><textarea name="textbox" type="text" placeholder="こちらに入力"></textarea><br>
17  <input type="submit" value="送信">
18</form>
19</body>
20</html>
21

php
1<html>
2<head><title>output.php</title></head>
3<body>
4  <?php
5  $name=$_POST['name'];
6  $body=$_POST['textbox'];
7  print("投稿が完了しました！<br />");
8  print("お名前: $name<br />");
9  print("投稿内容: $textbox><br />");
10  ?>
11</body>
12</html>
13

です。
progateのHTML&CSSとPHPを一周したくらいで、まだ詳しいことなにも分かってないような状態ですので、お見苦しいコードかと思いますが、どうかご教授お願いいたします。

yambejp

2019/09/20 07:10

ソースを画像で提示されても回答者は困ります回答を得たいならテキストのソースをマークダウンして表示してください

x_x

2019/09/20 07:24

「ブロックのような感じ」というのは何でしょう？何か四角い箱が表示されているということでしょうか？

gakurekikonnpu

2019/09/20 07:25

初めて利用したもので、、、申し訳ありません

gakurekikonnpu

2019/09/20 07:27

x_x様そうです、四角い箱の中に文字が入っており、表のようになっている状態です。

x_x

2019/09/20 07:33

ここですよね？ http://www.standpower.com/php_form.html 四角い箱は入力画面のことでしょうか？

gakurekikonnpu

2019/09/20 07:37

サイト足りてませんでしたね。申し訳ありません。 http://www.standpower.com/input.html この四角い箱です、、

行動規範の内容に同意します

回答1件

とりあえず

$body=$_POST['textbox'];

として$body変数をつかっているのに、表示箇所では

print("投稿内容: $textbox><br />");

と、宣言していない$textboxを利用しているのがまずいですね

またpostで受け取ったデータはかならずエスケープして表示しないといけません
またテキストエリアを表示するには改行を<br>にするなど工夫が必要です

PHP
1<?php
2$name=filter_input(INPUT_POST,'name');
3$body=filter_input(INPUT_POST,'textbox');
4if(!is_null($name)){
5  $h["name"]=htmlspecialchars($name);
6  $h["body"]=nl2br(htmlspecialchars($body));
7  print "投稿が完了しました！<br />\n";
8  print "お名前: {$h["name"]}<br />\n";
9  print "投稿内容: {$h["body"]}<br />\n";
10  exit;
11}
12?>
13<!DOCTYPE html>
14<html lang="ja">
15<head>
16  <meta charset="UTF-8">
17  <title>掲示板</title>
18  <meta name="description" content="けいじばん！">
19  <link rel="stylesheet" href="keijiban.css">
20</head>
21
22<body>
23  <div class="center">
24  <h1>掲示板</h1>
25  <p>新規投稿</p>
26  <form method="post">
27  お名前:<br><input type="text" name="name"><br>
28  投稿内容:<br><textarea name="textbox" placeholder="こちらに入力"></textarea><br>
29  <input type="submit" value="送信">
30</form>
31</body>
32</html>

投稿2019/09/20 07:37

yambejp

総合スコア114806

gakurekikonnpu

2019/09/20 07:45

ご回答ありがとうございます。そうですね、名前を統一するの忘れてました、、このタグを貼り付けて試してみたのですが、送信後やはりコードが表示されてしまいます、、

yambejp

2019/09/20 07:51

> 送信後やはりコードが表示されてしまいますまさかとは思いますが、ちゃんとapacheなどhttpdは起動していてその上でphpが実行できる環境にありますよね？

gakurekikonnpu

2019/09/20 08:00

すみません、勉強し始めたばかりなのでわかりません( ˊ•̥ ̯ •̥`) apacheは利用していません。chromeしか利用していません、、それが原因でしょうか？

yambejp

2019/09/20 08:06 編集

つまりローカルのファイルを使ってphpが動くと思っているという勘違いですかね？ url欄は「file:」から始まってたりするんでしょうか？ PHPはサーバーサイドの言語なので、原則実行するには受け皿になる apacheなどのhttpdが必要です。ご利用のOSなどわかりませんが、XAMPPなど統合環境を導入したほうがよいかもしれません

gakurekikonnpu

2019/09/20 08:23

知識不足ですみませんでした。 XAMPPダウンロードしてみます。

行動規範の内容に同意します