チェックボックス

PHPのforeach文を使用したHTMLタグの動的生成

```php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動物の名前</title>
</head>
<body>
    <?php
    // 動物名の配列を定義
    $animals = ['犬', '猫', 'ウサギ', '鳥', 'カメ'];

    // 配列の要素を繰り返し処理し、各動物の名前を段落として表示
    foreach ($animals as $animal) {
        echo '<p>' . $(1) . '</p>';
    }
    ?>
</body>
</html>
```

$_POST

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>注文フォーム画面</title>
</head>

<body>
  <h3>注文フォーム</h3>

  <p>商品名：お名前ペン</p>
  <p>価格（税込）：100円</p>

  
  <p>会員ID：<?php echo $_POST['userId']; ?></p>

  
  <p>注文ID：<?php echo $_POST['orderId']; ?></p>

  
  <p>配送日：<?php echo $_POST['date']; ?></p>

  
  <p>ご要望欄：</p>
  <p><?php echo $_POST['opinion']; ?></p>

  
  <p>色：
    <?php
    echo $_POST['color'];
    ?>
  </p>

  
  <p>アンケート「この商品を選んだ理由を教えてください」（複数選択可）：
    <?php
    if (!empty($_POST['reason'])) {
      // 問題2. チェックボックスの値を出力してください
      // この下に解答してください
      foreach ($_POST['reason'] as $value) {
        echo '<p>' . $value . '</p>';
      }
    }
    ?>
  </p>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>注文フォーム画面</title>
</head>

<body>
  <h3>注文フォーム</h3>

  <p>商品名：お名前ペン</p>
  <p>価格（税込）：100円</p>

  <form action='confirm.php' method='post'>

    
    <p>会員ID：<input type='text' name='userId'></p>

    
    <input type='hidden' name='orderId' value='orderId-12345'>

    
    <p>配送日：<input type='date' name='date'></p>

    
    <p>ご要望欄：</p>
    <p><textarea name='opinion' cols='50' rows='5'></textarea></p>

    
    <p>色：
      <label><input type='radio' name='color' value='黒' checked>黒</label>
      <label><input type='radio' name='color' value='赤'>赤</label>
      <label><input type='radio' name='color' value='青'>青</label>
    </p>

    
    <p>アンケート「この商品を選んだ理由を教えてください」（複数選択可）：
      <input type='checkbox' name='reason[]' value='色'>色
      <input type='checkbox' name='reason[]' value='形'>形
      
      
      <input type='checkbox' name='reason[]' value='価格'>価格
    </p>

    <p><input type='submit' name='submitButton' value='送信'></p>

  </form>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>注文フォーム画面</title>
</head>

<body>
  <h3>注文フォーム</h3>

  <p>商品名：お名前ペン</p>
  <p>価格（税込）：100円</p>

  
  <p>会員ID：<?php echo $_POST['userId']; ?></p>

  
  <p>注文ID：<?php echo $_POST['orderId']; ?></p>

  
  <p>配送日：<?php echo $_POST['date']; ?></p>

  
  <p>ご要望欄：</p>
  <p><?php echo $_POST['opinion']; ?></p>

  
  <p>色：
    <?php
    echo $_POST['color'];
    ?>
  </p>

  
  <p>アンケート「この商品を選んだ理由を教えてください」（複数選択可）：
    <?php
    if (!empty($_POST['reason'])) {
      // 問題2. チェックボックスの値を出力してください
      // この下に解答してください
    }
    ?>
  </p>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>注文フォーム画面</title>
</head>

<body>
  <h3>注文フォーム</h3>

  <p>商品名：お名前ペン</p>
  <p>価格（税込）：100円</p>

  <form action='confirm.php' method='post'>

    
    <p>会員ID：<input type='text' name='userId'></p>

    
    <input type='hidden' name='orderId' value='orderId-12345'>

    
    <p>配送日：<input type='date' name='date'></p>

    
    <p>ご要望欄：</p>
    <p><textarea name='opinion' cols='50' rows='5'></textarea></p>

    
    <p>色：
      <label><input type='radio' name='color' value='黒' checked>黒</label>
      <label><input type='radio' name='color' value='赤'>赤</label>
      <label><input type='radio' name='color' value='青'>青</label>
    </p>

    
    <p>アンケート「この商品を選んだ理由を教えてください」（複数選択可）：
      <input type='checkbox' name='reason[]' value='色'>色
      <input type='checkbox' name='reason[]' value='形'>形
      
      
    </p>

    <p><input type='submit' name='submitButton' value='送信'></p>

  </form>
</body>

</html>


    // =======================
    // 問題1
    // =======================
    // 問題文
    const title1 = 'チェックボックスを配列で作成してください';
    // 実装タスク
    const task1 = '`index.php`にて、`*type*`属性に`*checkbox*`、`*name*`属性に`*reason[]*`、`*value*`属性に`*価格*`を、ボタン名に`*価格*`を指定した`*<input>*`タグを作成しよう';
    // ヒント
    const hint1 = `次のコードを参考にしてください。
~~~php
<input type='checkbox' name='check[]' value='check01'>チェック1
<input type='checkbox' name='check[]' value='check02'>チェック2
~~~`;
    // アンサーコード
    const answer1_1 = '<input';
    const answer1_2 = "type='checkbox'";
    const answer1_3 = "name='reason[]'";
    const answer1_4 = "value='価格'";
    const answer1_5 = '>価格';
    // =======================
    // 問題2
    // =======================
    // 問題文
    const title2 = 'チェックボックスの値を出力してください';
    // 実装タスク
    const task2 = "`confirm.php`にて、`*foreach*`文を利用して`HTTP POST変数` `*$_POST['reason']*`をまわし、`*<p>*`タグで囲われた要素`*$value*`を`*echo*`で出力しよう";
    // ヒント
    const hint2 = `次のコードを参考にしてください。
~~~php
foreach ($_POST['checkbox'] as $value) {
  echo '<p>' . $value . '</p>';
}
~~~`;
    // アンサーコード
    const answer2 = `
foreach ($_POST['reason'] as $value) {
  echo '<p>' . $value . '</p>';
}
`;
    // =======================
    // 手順
    // =======================
    const questions = [
        {
            title: title1,
            tests: [
                {
                    title: task1,
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor(answer1_1);
                        isContainTextInEditor(answer1_2);
                        isContainTextInEditor(answer1_3);
                        isContainTextInEditor(answer1_4);
                        isContainTextInEditor(answer1_5);
                    }
                }
            ]
        },
        {
            title: title2,
            tests: [
                {
                    title: task2,
                    hint: hint2,
                    test: () => {
                        isContainTextInEditor(answer2);
                    }
                }
            ]
        }
    ];


フォームとPHP

POSTメソッド

$_GET

GETメソッド

テキストボックス

隠しフィールド

テキストエリア

ラジオボタン

セレクトボックス

PHPのfor文を使用したHTMLタグの動的生成

【演習】簡易お買い物フォームを作成しよう

バリデート

【演習】簡易お買い物フォームにバリデート処理を追加しよう

問い合わせページなどでよく目にするフォーム入力と、そのデータの受け渡しを学ぶレッスンです。
入力値チェックであるバリデート処理まで、Webアプリ作成に欠かせないスキルを身につけます。