新・HTML/CSS入門編19:プルダウン型の選択肢を生成(select/option)

/* /var/www/html/index.html */
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>新規プロジェクト登録</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <div class="form-container">
        <form action="">
            <h1>新規プロジェクト登録</h1>
            <p>
                <label for="project">プロジェクト名</label><br>
                <input type="text" name="project" id="project">
            </p>
            <p>
                <label for="client">クライアント名</label><br>
                <input type="text" name="client" id="client">
            </p>
            <p>
                <label for="email">担当者メールアドレス</label><br>
                <input type="email" name="email" id="email">
            </p>
            <p>
                <label for="budget">予算（円）</label><br>
                <input type="number" name="budget" id="budget">
            </p>
            <p>
                <label for="deadline">希望納期</label><br>
                <input type="date" name="deadline" id="deadline">
            </p>
            <p>
                プロジェクト種別<br>
                <label><input type="radio" name="option" value="web">Webサイト制作</label>
                <label><input type="radio" name="option" value="logo">ロゴデザイン</label>
                <label><input type="radio" name="option" value="pamphlet">パンフレット制作</label>
            </p>
            <p>
                作業範囲（複数選択可）<br>
                <label><input type="checkbox" name="option" value="design">デザイン</label>
                <label><input type="checkbox" name="option" value="cording">コーディング</label>
                <label><input type="checkbox" name="option" value="writing">ライティング</label>
                <label><input type="checkbox" name="option" value="photo">写真撮影</label>
            </p>
            <p>
                担当デザイナー<br>
                </*ここに追加*/ name="designer">
                    <option>田中</option>
                    <option>佐藤</option>
                    <option>高橋</option>
                /*ここに追加*/
            </p>
            <p><input type="submit"></p>
        </form>
    </div>
</body>
</html>

/* /var/www/html/index.html */
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>新規プロジェクト登録</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <div class="form-container">
        <form action="">
            <h1>新規プロジェクト登録</h1>
            <p>
                <label for="project">プロジェクト名</label><br>
                <input type="text" name="project" id="project">
            </p>
            <p>
                <label for="client">クライアント名</label><br>
                <input type="text" name="client" id="client">
            </p>
            <p>
                <label for="email">担当者メールアドレス</label><br>
                <input type="email" name="email" id="email">
            </p>
            <p>
                <label for="budget">予算（円）</label><br>
                <input type="number" name="budget" id="budget">
            </p>
            <p>
                <label for="deadline">希望納期</label><br>
                <input type="date" name="deadline" id="deadline">
            </p>
            <p>
                プロジェクト種別<br>
                <label><input type="radio" name="option" value="web">Webサイト制作</label>
                <label><input type="radio" name="option" value="logo">ロゴデザイン</label>
                <label><input type="radio" name="option" value="pamphlet">パンフレット制作</label>
            </p>
            <p>
                作業範囲（複数選択可）<br>
                <label><input type="checkbox" name="option" value="design">デザイン</label>
                <label><input type="checkbox" name="option" value="cording">コーディング</label>
                <label><input type="checkbox" name="option" value="writing">ライティング</label>
                <label><input type="checkbox" name="option" value="photo">写真撮影</label>
            </p>
            <p>
                担当デザイナー<br>
                </*ここに追加*/ name="designer">
                    <option>田中</option>
                    <option>佐藤</option>
                    <option>高橋</option>
                /*ここに追加*/
            </p>
            <p><input type="submit"></p>
        </form>
    </div>
</body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1

問題ログインすると模範解答や入力を見ることができます

演習課題「プルダウンリストを作成しよう」

現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。

プルダウン型の選択肢を使い、プロジェクトの具体的な情報を入力できるように機能を拡張します。「担当デザイナー」の指定のある箇所にselect要素を追記することで、担当デザイナーのプルダウンリストを作成してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃06:プルダウン型の選択肢を生成(select/option)

このチャプターでは、プルダウン型の選択肢について学習します。

プルダウン型の選択肢を生成(select/option)

プルダウン形式（ドロップダウンリスト）の選択肢は、select要素とoption要素を組み合わせて生成します。

select要素でリスト全体を囲み、個々の選択肢をoption要素で記述します。option要素で囲んだテキストが、ユーザーに表示される選択肢のラベルになります。

option要素のvalue属性で、その項目が選択されたときにサーバーに送信される値を指定します。また、selected属性を追加すると、その項目が初期状態で選択された状態になります。

コピー＆ペースト用のコード

<option>選択肢A</option>
<option>選択肢B</option>
<option>選択肢C</option>

今回作成したコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>プルダウン型の選択肢</title>
    <meta name="viewport" content="width=device-width initial-scale=1">
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <select name="choice">
        <option>選択肢A</option>
        <option selected>選択肢B</option>
        <option>選択肢C</option>
    </select>
</body>
</html>

参考サイト

MDN web docs - <select>: HTML選択要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編19: フォームを理解しよう > プルダウン型の選択肢を生成(select/option)