HTML form を組み立てる

テクノロジ系／ web (HTTP / $_GET / $_POST / form / php -S)

HTML form を組み立てる

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">                  <!-- → $_POST['name'] -->
  <input name="email">                 <!-- → $_POST['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 の挙動 (< → < など) を確かめるには php -r 'echo htmlspecialchars("<b>");' が便利

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

✅ <form action method> と <input name> を書ける

✅ name 属性が $_POST のキーになると説明できる

✅ 1 ファイルで「form を出す / form を受ける」を両方書ける

✅ 出力時は htmlspecialchars でエスケープする

→ ドリルへ

考えてみよう

既定では正解・不正解の判定はしません。自分のペースで「答えを見る」を。採点してほしい場合だけ「採点してほしい」を押してください。

ドリル 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>

採点

php scripts/grade.php topics/web/ch05-html-form/drill/01-build-form-html/

ヒント

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

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

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

ドリル 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>

採点

php scripts/grade.php topics/web/ch05-html-form/drill/02-process-form/

ヒント

$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> を渡すと <script> にエスケープされて、ブラウザでもタグとして解釈されない安全な状態になることを 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/

HTML form を組み立てる