テンプレートツールを自作して結果HTMLタグで取得したい。

下記のサイトのようにテンプレート作成ツールを作りたいです。
フォーム画面で入力、プレビュー画面で確認＆結果をhtmlタグで受け取る。
この場合PHPとhtmlのフォームで受け渡し結果を表示することはできたのですが、htmlタグが取得できません。。

・そもそも結果をhtmlタグで取得する場合、PHPを使うのでしょうか。
・それとも他の言語（Javascriptなどを）使うのでしょうか。
・PHPを使う場合は file_get_contentsなどでtb-cell mail-form以下を正規表現で取得してvar_dumpするなどして表示させるのでしょうか。

詳しい方いましたらよろしくお願いします。

・おーくりんくす
http://www.auclinks.com/apm/prog/?mo=input&pl=101&co=2&pa=2

【試したこと】

index.html
1
2<!DOCTYPE html>
3<html lang="ja" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6
7    <link rel="stylesheet" media="all" href="css/stylesheet.css">
8
9
10    <title>フォーム入力画面（サンプル）</title>
11  </head>
12  <body>
13
14    <div class="tb-cell mail-form">
15    <form id="form" action="teratail.php" method="post">
16    <div class="row">
17    <div class="cell">
18    <label>name</label>
19    <!--cell--></div>
20    <div class="cell">
21    <input type="text" name="name" required>
22    <!--cell--></div>
23    <!--row--></div>
24    <div class="row">
25    <div class="cell">
26    <label>email</label>
27    <!--cell--></div>
28    <div class="cell">
29    <input type="email" name="email" required>
30    <!--cell--></div>
31    <!--row--></div>
32    <div class="row">
33    <div class="cell">
34    <label>comment</label>
35    <!--cell--></div>
36    <div class="cell">
37    <textarea name="comment" required></textarea>
38    <!--cell--></div>
39    <!--row--></div>
40    <div class="row">
41    <div class="cell">
42    &nbsp;
43    <!--cell--></div>
44    <div class="cell">
45    <button type="submit" id="sbtn" name="action" value="post">送　信</button>
46    <button type="reset" id="rbtn">リセット</button>
47    <!--cell--></div>
48    <!--row--></div>
49    </form>
50    <!--tb-cell--></div>
51
52  </body>
53</html>
54
55
56

post.php
1
2<?php
3
4// エラーを出力する
5ini_set( 'display_errors', 1 );
6
7var_dump($_POST);
8
9$records = $_POST;
10
11?>
12
13<!DOCTYPE html>
14<html lang="ja" dir="ltr">
15  <head>
16
17    <meta charset="utf-8">
18
19    <link rel="stylesheet" media="all" href="css/stylesheet.css">
20
21    <title>入力フォーム確認画面（サンプル）</title>
22  </head>
23  <body>
24
25
26<div class="tb-cell mail-form">
27<form id="form" action="teratail.php" method="post">
28<div class="row">
29<div class="cell">
30<label>name</label>
31<!--cell--></div>
32<div class="cell">
33  <?php echo $_POST["name"]; ?>
34<!--cell--></div>
35<!--row--></div>
36<div class="row">
37<div class="cell">
38<label>email</label>
39<!--cell--></div>
40<div class="cell">
41  <?php echo $_POST["email"]; ?>
42<!--cell--></div>
43<!--row--></div>
44<div class="row">
45<div class="cell">
46<label>comment</label>
47<!--cell--></div>
48<div class="cell">
49  <?php echo $_POST["comment"]; ?>
50<!--cell--></div>
51<!--row--></div>
52
53
54
55<div class="row">
56<div class="cell">
57&nbsp;
58<!--cell--></div>
59<div class="cell">
60<button type="submit" id="sbtn" name="action" value="post">確　認</button>
61<button type="reset" id="rbtn">リセット</button>
62<!--cell--></div>
63<!--row--></div>
64</form>
65<!--tb-cell--></div>
66
67<center>
68<a href="teratail.html">戻る</a>
69</center>
70
71  </body>
72</html>
73
74
75

【取得したい箇所】

<div class="tb-cell mail-form"> <form id="form" action="mail.php" method="post"> <div class="row"> <div class="cell"> <label>name</label> </div> <div class="cell"> あああ</div> </div> <div class="row"> <div class="cell"> <label>email</label> </div> <div class="cell"> sample@gmail.com</div> </div> <div class="row"> <div class="cell"> <label>comment</label> </div> <div class="cell"> あああ</div> </div> <div class="row"> <div class="cell">   </div> <div class="cell"> <button type="submit" id="sbtn" name="action" value="post">確　認</button> <button type="reset" id="rbtn">リセット</button> </div> </div> </form> </div>

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

回答2件

質問文の参考サイトで提示されているものは、<textarea>タグの中に直接HTMLタグを記述し、そこに記述されたものをPOSTしているだけです。
今表示しているサイトのHTMLを出力しているわけではありません。
いわゆる「wysiwyg」と呼ばれる技術というか手法ですね。
この名前をググってもらったほうが早いと思います。
が、今回やりたいことを考えると、wysiwygなんか使わず、単にFormのデータを使って確認画面で表示すればいいだけ何じゃないかなと思いますが。
装飾含めてユーザー側にデザインさせる意図がある場合は必要ですが。

投稿2019/02/23 08:27

kunai

総合スコア5405

退会済みユーザー

2019/02/23 14:57

お世話になっております。・<textarea>タグの中に直接HTMLタグを記述し、そこに記述されたものをPOSTしているだけです。今表示しているサイトのHTMLを出力しているわけではありません。 >>そういう構成だったんですね。勉強になります。。 wysiwygも検索してみます。明日色々考えて再挑戦してみます。。

wwbQzhMkhhgEmhU

2019/02/23 16:00 編集

昔よく使われてた言葉としてのwysiwygとはちょっと違うような… 例えば、HTMLなら、HTML言語で直接テキストファイルを編集しながらプレビューするのではなく、HTMLファイルをMS Wordなどで開いて編集する、といったことをする場合は「見たままが得られる」のでwysiwygです。なお、textarea要素の中にHTMLのタグを直接記述するのはあまりオススメしません。セキュリティ的に問題があるためです。こういうことをする場合は、サーバ側でテキストの内容をparseし、安全な要素のみを残して、他は文字参照、属性の中はURLエンコーディングし、同時に綺麗なHTMLに整形する、といった作業をするのが一般的です(FKMさんの言っているサニタイズ処理です)。ようは、textarea内にHTMLタグを使わせない方がいいですよってことです(kunaiさんも同じことを言ってる気がしますが、よく分かりません)。

退会済みユーザー

2019/02/24 04:59

お世話になっております。ローカル環境で使ってみたくて簡易式のものを作成しています。・textarea要素の中にHTMLのタグを直接記述するのはあまりオススメしません。 >>texteraタグ普段使わないのでセキュリティ上の問題があること初めて知りました。（ありがとうございます。。）詳細もありがとうございます。１つずつ確認し、処理していきます。（一応簡易式の実装は出来ました。）

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

ベストアンサー

ヒアドキュメントを使い一度にhtmlを文字列として扱い、変数に格納するのが一番てっとり早い気がします。

もっとも、実務でやるならタグのサニタイズ（無害化処理）が必須ですが、練習程度なら問題ないです。

ヒアドキュメント

また、テンプレートとして自在に引き出したいならテキストファイルにhtmlタグ一式を格納しておいて、ファイルを呼び出しデータをダンプするという手もありますね。txtファイルだとhtmlはただの文字列なので

投稿2019/02/23 13:24

FKM

総合スコア3633

退会済みユーザー

2019/02/23 14:53

お世話になっております。・ヒアドキュメントを使い一度にhtmlを文字列として扱い、変数に格納するのが一番てっとり早い気がします。 >>ヒアドキュメント調べてみます。。

退会済みユーザー

2019/02/24 05:03

お世話になっております。タグのサニタイズ = エスケープ処理なのですね、、全部をエスケープすると困るので wwbQzhMkhhgEmhUさんが言われているような処理が必要そうです。。（一応簡易式は完成しましたので一旦質問を解決済みにします。次に質問でわからないことを投稿しようと思います。回答ありがとうございました。）

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

あなたの回答