AIと学ぶPHPの学校
ch05 6章中 5章目

ch05 — HTML form を組み立てて受け取る

スライドで見る

この章を AI と学ぶ

💬 AI に聞く質問例 3 件

  1. 「ch05 — HTML form を組み立てて受け取る」のつまずきやすいポイントを、初学者向けに3つ教えてください

    ChatGPT Claude Gemini

  2. 「ch05 — HTML form を組み立てて受け取る」について、自分の手で試せる練習問題を3つ出してください (難易度を上げながら)

    ChatGPT Claude Gemini

  3. 「ch05 — HTML form を組み立てて受け取る」を学んだ後、次に学ぶと良いトピックは何ですか？理由も教えてください

    ChatGPT Claude Gemini

概要

ここまでで $_GET / $_POST で値を受け取れるようになった。次は 送信する側 (HTML) を自分で書く。HTML フォームの最小構造は <form action="..." method="post"> の中に <input name="key"> を並べ、<button type="submit"> を 1 つ置くだけ。<input> の name 属性 が PHP 側の $_POST['name'] のキーになる対応関係を脳に刻む。

このチャプターから、1 ファイルで 「フォームを出す側」と「フォーム送信を受ける側」を兼ねる 書き方が出る。$_SERVER['REQUEST_METHOD'] が GET なら HTML 出力、POST なら受信内容を出力、という分岐。フレームワークではコントローラのアクションが分かれるが、生 PHP では 1 ファイルでやるのが自然。

そして HTML 出力の 絶対の習慣 が htmlspecialchars() でエスケープ。ユーザー入力をそのまま echo すると、<script> を埋め込まれて任意の JavaScript が走る XSS 攻撃 の入り口になる。echo htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8') が「ユーザー入力を画面に出すときの標準形」。反射的に書けるようにする。

学習目標

  • <form action="..." method="post"> の最小構造を書ける
  • <input name="key"> の name 属性が PHP の $_POST['key'] と対応すると言える
  • form を出す側と、その送信を受ける側 を 1 ファイル内で書ける
  • 出力時に htmlspecialchars でエスケープする習慣がつく

ドリル

no 内容
01 指定された name 属性を持つ <form> 文字列を出力
02 フォーム送信を受け取って結果ページを出力 (受け口側)

本物の Web で確認したい場合

cd topics/web/ch05-html-form/drill/02-process-form/
php -S localhost:8000 answer.php

ブラウザで http://localhost:8000/ を開き、フォームに入力して送信。

解説スライド 全 7 枚

右の › ボタンか → キー(またはスワイプ)で次のスライドに進めます。 下の「縦表示」を開くと全スライドを一気に読めます。

  1. HTML form を組み立てる

    Lesson 12 / Chapter 5

  2. form の最小構造

    <form action="/register" method="post">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>
    属性 役割
    action 送信先 URL (省略すると同じ URL に POST する)
    method get or post (大文字小文字は問わない)
    <input name="..."> 送信時のキー名 ← これが $_POST のキーになる

  3. name 属性が $_POST のキーになる

    <form method="post" action="/register">
  <input name="name">                  
  <input name="email">                 
  <button type="submit">送信</button>
</form>

    PHP 側:

    <?php
$name  = $_POST['name']  ?? '';
$email = $_POST['email'] ?? '';

    name="..." を書き忘れると、その値は送信されない。一番ハマるところ。

  4. form を出す側 / 受ける側 を 1 つの PHP で

    <?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 受け口
    $name = $_POST['name'] ?? '';
    echo "登録: " . htmlspecialchars($name) . "\n";
} else {
    // form を出す
    echo '<form method="post">';
    echo '<input name="name">';
    echo '<button type="submit">送信</button>';
    echo '</form>';
}
    • GET でアクセスされたら form を表示
    • 同じ URL に POST されたら結果を表示
    • これが 1 ファイル Web アプリの基本形

  5. 出力時の htmlspecialchars

    $name = $_POST['name'] ?? '';
echo "こんにちは、" . htmlspecialchars($name);
    なぜ必要か 例
    < や > を文字としてそのまま表示 <b>太郎</b> を太字にせず文字列として出す
    XSS 対策 (悪意あるスクリプト混入の防止) <script>...</script> の混入を無効化
    • Web で ユーザー入力をそのまま echo してはいけない
    • htmlspecialchars($s, ENT_QUOTES, 'UTF-8') がより安全な書き方 (引用符もエスケープ)

  6. 採点向けの注意

    • このコースの drill は HTML 文字列の出力 を採点する
    • ブラウザに描画される見た目ではなく、echo した文字列そのものが期待値と一致するか
    • htmlspecialchars の 挙動 (< → &lt; など) を確かめるには php -r 'echo htmlspecialchars("<b>");' が便利

  7. このチャプターでできるようになること

    ✅ <form action method> と <input name> を書ける ✅ name 属性が $_POST のキーになると説明できる ✅ 1 ファイルで「form を出す / form を受ける」を両方書ける ✅ 出力時は htmlspecialchars でエスケープする

    → ドリルへ

1 / 7
📜 スライドを全部一気に読む(縦表示)

Lesson 12 / Chapter 5

form の最小構造

<form action="/register" method="post">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>
属性 役割
action 送信先 URL (省略すると同じ URL に POST する)
method get or post (大文字小文字は問わない)
<input name="..."> 送信時のキー名 ← これが $_POST のキーになる

name 属性が $_POST のキーになる

<form method="post" action="/register">
  <input name="name">                  
  <input name="email">                 
  <button type="submit">送信</button>
</form>

PHP 側:

<?php
$name  = $_POST['name']  ?? '';
$email = $_POST['email'] ?? '';

name="..." を書き忘れると、その値は送信されない。一番ハマるところ。

form を出す側 / 受ける側 を 1 つの PHP で

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 受け口
    $name = $_POST['name'] ?? '';
    echo "登録: " . htmlspecialchars($name) . "\n";
} else {
    // form を出す
    echo '<form method="post">';
    echo '<input name="name">';
    echo '<button type="submit">送信</button>';
    echo '</form>';
}
  • GET でアクセスされたら form を表示
  • 同じ URL に POST されたら結果を表示
  • これが 1 ファイル Web アプリの基本形

出力時の htmlspecialchars

$name = $_POST['name'] ?? '';
echo "こんにちは、" . htmlspecialchars($name);
なぜ必要か 例
< や > を文字としてそのまま表示 <b>太郎</b> を太字にせず文字列として出す
XSS 対策 (悪意あるスクリプト混入の防止) <script>...</script> の混入を無効化
  • Web で ユーザー入力をそのまま echo してはいけない
  • htmlspecialchars($s, ENT_QUOTES, 'UTF-8') がより安全な書き方 (引用符もエスケープ)

採点向けの注意

  • このコースの drill は HTML 文字列の出力 を採点する
  • ブラウザに描画される見た目ではなく、echo した文字列そのものが期待値と一致するか
  • htmlspecialchars の 挙動 (< → &lt; など) を確かめるには php -r 'echo htmlspecialchars("<b>");' が便利

このチャプターでできるようになること

✅ <form action method> と <input name> を書ける ✅ name 属性が $_POST のキーになると説明できる ✅ 1 ファイルで「form を出す / form を受ける」を両方書ける ✅ 出力時は htmlspecialchars でエスケープする

→ ドリルへ

この章で取り組む 演習問題の流れ (2ステップ)
  1. 01 ドリル 01 — 登録フォームの HTML を出力する README.md starter.php answer.php
  2. 02 ドリル 02 — フォーム送信を受け取って結果を出力 README.md starter.php answer.php

演習問題の詳細

この章の演習問題の内容を読めます。実際に手元で解くには教材リポジトリを clone してください。

ドリル 01 — 登録フォームの HTML を出力する

問題

次の HTML を そっくりそのまま 出力する PHP を書いてください。

<form action="/register" method="post">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit">送信</button>
</form>

各タグは 1 行ずつ echo すること (改行の入れ方も期待値に合わせる)。

このドリルでは標準入力は使いません。

期待される出力:

<form action="/register" method="post">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit">送信</button>
</form>

ヒント

echo "<form action=\"/register\" method=\"post\">\n";
echo "<input type=\"text\" name=\"name\">\n";
// ...

シングルクォート文字列を使えばエスケープが要らない:

echo '<form action="/register" method="post">' . "\n";

🧪 ブラウザで試す

スライドのコードを写経して ▶ 実行、自分で書いて 📝 採点 で答え合わせ。初回のみ PHP ランタイム読込で数秒かかります。

PHP ランタイム未読込 

          

        

              

          

        

          ドリル 02 — フォーム送信を受け取って結果を出力
        

        


問題


フォームから POST された name と email を受け取り、次の形式で出力する PHP を書いてください。


<p>登録しました: {name} ({email})</p>


{name} と {email} は htmlspecialchars でエスケープしてから 埋め込むこと (XSS 対策の練習)。


採点ランナーは CLI 直実行なので、冒頭で stdin の 1 行を parse_str で $_POST に展開 するスタブを置いてください。


このドリルの入力例:


name=太郎&email=taro@example.com


期待される出力:


<p>登録しました: 太郎 (taro@example.com)</p>


ヒント


$name  = htmlspecialchars($_POST['name']  ?? '', ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'] ?? '', ENT_QUOTES, 'UTF-8');
echo "<p>登録しました: {$name} ({$email})</p>\n";


普通の文字 (太郎 / taro@example.com) は htmlspecialchars でも変化しないので、期待値はそのまま表示される。
試しに name=<script> を渡すと &lt;script&gt; にエスケープされて、ブラウザでもタグとして解釈されない安全な状態になることを php -r で確認しても良い。


本物の Web で確認したい場合


cd topics/web/ch05-html-form/drill/02-process-form/
php -S localhost:8000 answer.php


別ターミナルで:


curl -X POST -d "name=太郎&email=taro@example.com" http://localhost:8000/
        

                        

          
🧪 ブラウザで試す

          
スライドのコードを写経して ▶ 実行、自分で書いて 📝 採点 で答え合わせ。初回のみ PHP ランタイム読込で数秒かかります。

          
          

            
            
            
            PHP ランタイム未読込
          

          

          

        

              

      

  
    

    
 演習問題(2問)

    
    
              
  1. 
          
    ドリル 01 — 登録フォームの HTML を出力する
    
          
    
                          README.md
                          starter.php
                          answer.php
                      
    
        
    2. 
              
  2. 
          
    ドリル 02 — フォーム送信を受け取って結果を出力
    
          
    
                          README.md
                          starter.php
                          answer.php
                      
    
        
    3. 
          

    
サイト内で問題文・雛形・解答例を確認できます。実際に手元で解くには教材リポジトリを clone してください。

  

  
  
  
  
  

  

  

    
    
完了にすると進捗に反映されます