チェックボックス
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 42/60。
HTMLにおいて、チェックボックスは、ユーザーがグループ内から複数のオプションを選択できる一連のオプションを作成するために使用されます。チェックボックスは、type属性を"checkbox"に設定した<input>タグを使用して作成されます。
HTMLでチェックボックスを作成するための基本的な構文は次のとおりです。
<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label><input>: 入力フィールドを定義するタグです。type="checkbox": 入力タイプをチェックボックスとして指定する属性です。id: チェックボックスに一意の識別子を付与する属性です。
name: チェックボックスをグループ化する属性です。ラジオボタンとは異なり、同じ名前を持つ複数のチェックボックスを同時に選択できます。value: チェックボックスに関連付けられた値を指定する属性です。この値は、フォームが送信されるときにサーバーに送信されます。
<label>: チェックボックスに対してクリック可能なラベルを提供するタグです。ラベルのfor属性は、チェックボックスのid属性と一致させる必要があります。
チェックボックスのグループを作成する例を以下に示します。
<form>
<input type="checkbox" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label><br>
<input type="checkbox" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label><br>
</form>この例では、3つのチェックボックスを持つフォームがあります。これらはすべて同じ name 属性（"mygroup"）を共有しているため、同じグループに属しています。各チェックボックスには一意の id と value、および対応するラベルがあります。ユーザーがこれらのオプションの1つ以上を選択してフォームを送信すると、選択されたチェックボックスの値がサーバーに送信されます。
チャレンジ
簡単チェックボックスのグループを含むフォームを持つHTMLドキュメントを作成してください。フォームには以下の要素を含める必要があります。
<form>タグ。- フォームの中に、nameが"toppings"である3つのチェックボックスのグループを作成してください。
- 1つ目のチェックボックスは、idが"cheese"、valueが"cheese"であり、テキストが"Cheese"のラベルを持つ必要があります。
- 2つ目のチェックボックスは、id가"pepperoni"、valueが"pepperoni"であり、テキストが"Pepperoni"のラベルを持つ必要があります。
- 3つ目のチェックボックスは、idが"mushrooms"、valueが"mushrooms"であり、テキストが"Mushrooms"のラベルを持つ必要があります。
- 各ラベルの後に改行を作成するための
<br>タグを追加してください。
チートシート
チェックボックスを使用すると、ユーザーはグループから複数のオプションを選択できます。これらは、type="checkbox"を指定した<input>タグを使用して作成されます。
基本的なチェックボックスの構文：
<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>主な属性：
type="checkbox": 入力タイプをチェックボックスとして指定しますid: チェックボックスの一意の識別子name: チェックボックスをグループ化します（複数を選択可能）value: フォーム送信時にサーバーに送信される値<label for="">: クリック可能なラベルを提供します（for属性はチェックボックスのidと一致させます）
複数のチェックボックスの例：
<form>
<input type="checkbox" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label><br>
<input type="checkbox" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label><br>
</form>自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
