ラジオボタン

$_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
    // 問題2. ラジオボタンの値を出力してください
    // この下に解答してください
    echo $_POST['color'];
    ?>
  </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='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
    // 問題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>
      
      
    </p>

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

  </form>
</body>

</html>


    // =======================
    // 問題1
    // =======================
    // 問題文
    const title1 = 'ラジオボタンを作成してください';
    // 実装タスク
    const task1 = '`index.php`にて、`*type*`属性に`*radio*`、`*name*`属性に`*color*`、`*value*`属性に`*青*`を、ボタン名に`*青*`を指定した`*<input>*`タグを作成し、それを`*<label>*`タグで囲もう';
    // ヒント
    const hint1 = `次のコードを参考にしてください。
~~~php
<label><input type='radio' name='color' value='赤'>赤</label>
~~~`;
    // アンサーコード
    const answer1_1 = '<label><input';
    const answer1_2 = "type='radio'";
    const answer1_3 = "name='color'";
    const answer1_4 = "value='青'";
    const answer1_5 = '>青</label>';
    // =======================
    // 問題2
    // =======================
    // 問題文
    const title2 = 'ラジオボタンの値を出力してください';
    // 実装タスク
    const task2 = '`confirm.php`にて、`HTTP POST変数` `*$_POST*`の要素`*color*`を`*echo*`で出力しよう';
    // ヒント
    const hint2 = `次のコードを参考にしてください。
~~~php
var_dump($_POST);
~~~`;
    // アンサーコード
    const answer2 = "echo $_POST['color'];";
    // =======================
    // 手順
    // =======================
    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の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>
```

セレクトボックス

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

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

バリデート

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

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