新・HTML/CSS入門編19:選択肢(checkbox/radio)

/* /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="" name="option" value="web">Webサイト制作</label>
                <label><input type="" name="option" value="logo">ロゴデザイン</label>
                <label><input type="" name="option" value="pamphlet">パンフレット制作</label>
            </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="" name="option" value="web">Webサイト制作</label>
                <label><input type="" name="option" value="logo">ロゴデザイン</label>
                <label><input type="" name="option" value="pamphlet">パンフレット制作</label>
            </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="" name="option" value="design">デザイン</label>
                <label><input type="" name="option" value="cording">コーディング</label>
                <label><input type="" name="option" value="writing">ライティング</label>
                <label><input type="" name="option" value="photo">写真撮影</label>
            </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="" name="option" value="design">デザイン</label>
                <label><input type="" name="option" value="cording">コーディング</label>
                <label><input type="" name="option" value="writing">ライティング</label>
                <label><input type="" name="option" value="photo">写真撮影</label>
            </p>
            <p><input type="submit"></p>
        </form>
    </div>
</body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1
演習2

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

演習課題「ひとつのみ選択可能な選択肢を作成しよう」

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

inputタイプのうち選択肢を与えるための属性を使い、プロジェクトの具体的な情報を入力できるように機能を拡張します。「プロジェクト種別」の各項目について、input要素のtype属性にradioを指定することで、プロジェクトの種別のうち、ひとつのみを選ぶことができるような入力欄を作成してください。

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

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

演習課題「複数選択可能な選択肢を作成しよう」

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

前問に引き続いて、inputタイプのうち選択肢を与えるための属性を使い、プロジェクトの具体的な情報を入力できるように機能を拡張します。次は、「作業範囲（複数選択可）」の各項目について、input要素のtype属性にcheckboxを指定することで、作業範囲の種別から複数を選ぶことができるような入力欄を作成してください。

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

Tips

動画へ戻る

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

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

詳しい説明を読む

＃05:選択肢(checkbox/radio)

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

選択肢(checkbox/radio)

チェックボックスとラジオボタンは、ユーザーに選択肢を提示するためのフォームコントロールです。input要素のtype属性で指定します。

・checkbox: 複数選択が可能な選択肢を生成します。各項目は独立しており、いくつでも選択できます。
・radio: グループ内で一つだけ選択可能な選択肢を生成します。同じname属性を持つラジオボタンがグループと見なされます。

どちらも、選択された状態をCSSで装飾するために:checked擬似クラスが利用できます。

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

<label><input type="checkbox" name="option" value="A">選択肢A</label>  
<label><input type="checkbox" name="option" value="B">選択肢B</label>  
<label><input type="checkbox" name="option" value="C">選択肢C</label>

チェックボックスを表示するコード

<!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>
    <form action="">
        <label><input type="checkbox" name="option" value="A">選択肢A</label>
        <label><input type="checkbox" name="option" value="B">選択肢B</label>
        <label><input type="checkbox" name="option" value="C">選択肢C</label>
    </form>
</body>
</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>
    <form action="">
        <label><input type="radio" name="option" value="A">選択肢A</label>
        <label><input type="radio" name="option" value="B">選択肢B</label>
        <label><input type="radio" name="option" value="C">選択肢C</label>
    </form>
</body>
</html>

参考サイト

MDN web docs - <input type="checkbox">
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox

MDN web docs - <input type="radio">
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編19: フォームを理解しよう > 選択肢(checkbox/radio)