セレクトボックス

PHPのfor文を使用した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'])) {
      foreach ($_POST['reason'] as $value) {
        echo '<p>' . $value . '</p>';
      }
    }
    ?>
  </p>

  
  <p>配送希望時間：
    <?php
    // 問題2. セレクトボックスの値を出力してください
    // この下に解答してください
    echo $_POST['hour'];
    ?>時
  </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>配送希望時間：
      
      <select name='hour'>
        <?php
        // この下に解答してください
        for ($i = 9; $i <= 20; $i++) {
          echo '<option value=' . $i . '>' . $i . '時</option>';
        }
        ?>
      </select>
    </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'])) {
      foreach ($_POST['reason'] as $value) {
        echo '<p>' . $value . '</p>';
      }
    }
    ?>
  </p>

  
  <p>配送希望時間：
    <?php
    // 問題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='形'>形
      <input type='checkbox' name='reason[]' value='価格'>価格
    </p>

    
    <p>配送希望時間：
      
      <select name='hour'>
        <?php
        // この下に解答してください
        ?>
      </select>
    </p>

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

  </form>
</body>

</html>


    // =======================
    // 問題1
    // =======================
    // 問題文
    const title1 = 'セレクトボックスの`option`要素を動的に作成してください';
    // 実装タスク
    const task1 = '`index.php`にて、`*9*`から`*20*`までまわす`*for*`文を作成し、`*value*`属性とボックス名にカウント変数`*$i*`を指定した`*<option>*`タグと閉じタグ`*時</option>*`を`*echo*`しよう';
    // ヒント
    const hint1 = `次のコードを参考にしてください。
~~~php
<select name='month'>
<?php
  for ($i = 1; $i <= 12; $i++) {
    echo '<option value=' . $i . '>' . $i . '月</option>';
  }
?>
</select>
~~~`;
    // アンサーコード
    const answer1 = `
for ($i = 9; $i <= 20; $i++) {
  echo '<option value=' . $i . '>' . $i . '時</option>';
}
`;
    // =======================
    // 問題2
    // =======================
    // 問題文
    const title2 = 'セレクトボックスの値を出力してください';
    // 実装タスク
    const task2 = '`confirm.php`にて、`HTTP POST変数` `*$_POST*`の要素`*hour*`を`*echo*`で出力しよう';
    // ヒント
    const hint2 = `次のコードを参考にしてください。
~~~php
var_dump($_POST);
~~~`;
    // アンサーコード
    const answer2 = "echo $_POST['hour'];";
    // =======================
    // 手順
    // =======================
    const questions = [
        {
            title: title1,
            tests: [
                {
                    title: task1,
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor(answer1);
                    }
                }
            ]
        },
        {
            title: title2,
            tests: [
                {
                    title: task2,
                    hint: hint2,
                    test: () => {
                        isContainTextInEditor(answer2);
                    }
                }
            ]
        }
    ];


フォームとPHP

POSTメソッド

$_GET

GETメソッド

テキストボックス

隠しフィールド

テキストエリア

ラジオボタン

チェックボックス

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>
```

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

バリデート

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

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