見出し画像

PHP学習（フォームの受け渡し）

ゆーた 台湾移住🇯🇵🇹🇼

こんにちは！大阪でコーダーをしております、ゆーたです！
今回はWebサイトなどでよくあるフォームの挙動についてまとめてみようと思います。（自分の学習記録ですので間違っていましたらすみません）

Webサイトなどでは、WordPressなどではよくプラグインを使用するので、特に困ったりはしないですが、知っておきたいことがたくさんあったのでまとめます！


入力フォームの内容を受け渡す

まず初めに、入力した内容を遷移ページに受け渡す方法です。
htmlで以下のように仮に作成いたします。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <form action="submit.php" method="post">
       <label for="my_content">入力内容:</label>
       <input type="text" id="my_content" name="my_content">
       <input type="submit" value="送信する">
   </form>
   
</body>
</html>

スクリーンショット 2022-05-18 17.11.33

よくある入力フォームを作成いたしました。
ソースの確認をいたします。

<form action="submit.php" method="post">
<label for="my_content">入力内容:</label>
<input type="text" id="my_content" name="my_content">
<input type="submit" value="送信する">
</form>

<form action="submit.php" method="post">
こちらのaction="submit.php"は送信ボタンをクリックすると、submit.phpに遷移するという意味になっています。
method="post"は値を受け渡すときに設定する記述です。（今回はpostを使用）
<input type="text" id="my_content" name="my_content">
ここのname属性の値で入力内容を判断いたします。


新しく遷移用のsubmit.phpを作成いたします。

!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <?php if(!empty($_POST['my_content'])): ?>
   <p>入力内容:<?php echo htmlspecialchars($_POST['my_content'],ENT_QUOTES); ?></p>
   <?php endif; ?>
   
</body>
</html>

ソースを確認いたします。

<?php if(!empty($_POST['my_content'])): ?>
<p>入力内容:<?php echo htmlspecialchars($_POST['my_content'],ENT_QUOTES); ?></p>
<?php endif; ?>

<?php if(!empty($_POST['my_content'])): ?>
もし、name属性のmy_contentが空欄じゃなければ、

<?php echo htmlspecialchars($_POST['my_content'],ENT_QUOTES); ?>
name属性の内容を反映させる。

という感じです。


<?php echo htmlspecialchars($_POST['my_content'],ENT_QUOTES); ?>について

こちら、上記の記述でなくても、
<?php echo $_POST['my_content]; ?>
で値の受け渡しを可能です。
しかし、これだとセキリュティ的に危険が生じます。

例えば、
入力フォームにscriptタグで
<script>alert('入力変更');</script>
のようにJSを入力したとします。
そうすると、
JSが作動してしまいます。
このように、
<?php echo $_POST['my_content]; ?>
上記の記述のままで設定してしまうと、JSで変更されてしまう危険性があります。

スクリーンショット 2022-05-18 17.34.51

スクリーンショット 2022-05-18 17.34.59


そういうことが起こらないように、
<?php echo htmlspecialchars($_POST['my_content'],ENT_QUOTES); ?>
を設定すると、全てを文字として認識するので、JSで悪戯されることはなくなります。

スクリーンショット 2022-05-18 17.38.11




まとめ

以上のことから、フォームの受け渡しは以下で制御いたします。

index.html内


<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <form action="submit.php" method="post">
       <label for="my_content">入力内容:</label>
       <input type="text" id="my_content" name="my_content">
       <input type="submit" value="送信する">
   </form>
   <script>
       al
   </script>
   
</body>
</html>

submit.php内

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <?php if(!empty($_POST['my_content'])): ?>
   <p>入力内容:<?php echo htmlspecialchars($_POST['my_content'],ENT_QUOTES); ?></p>
   <?php endif; ?>
   
</body>
</html>

値を入力すると、

スクリーンショット 2022-05-18 17.41.34

値が受け渡される。

スクリーンショット 2022-05-18 17.41.40



大阪在住の２9歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。