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