HTML - formタグ

ラジオボタン

ラジオボタンの基本

ラジオボタンは、複数の選択肢から1つだけを選べる入力要素である。

基本的な実装を以下に示す。

• inputタグのtype属性を"radio"に指定する。
• 各選択肢には固有のvalue属性を設定する。
• checked属性で初期選択状態を設定できる。

また、アクセシビリティのためにlabelタグと組み合わせて使用する。

 <form>
   <div>
     <input type="radio" id="male" name="gender" value="male">
     <label for="male">男性</label>
 
     <input type="radio" id="female" name="gender" value="female">
     <label for="female">女性</label>
   </div>
 </form>

 <!-- checked属性は初期選択を指す -->
 <input type="radio" name="gender" value="male" checked>
 
 <!-- disabled属性は選択不可を指す -->
 <input type="radio" name="gender" value="female" disabled>

グループ化

ラジオボタンをグループ化するには、同じname属性値を設定する。

各ラジオボタンには個別のid属性値とvalue属性値を設定する。

labelタグを使用して、ラジオボタンにラベルを付ける。
labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。

 <form>
   <div>
     <p>好きな色を選んでください：</p>
 
     <input type="radio" id="red" name="color" value="red">
     <label for="red">赤</label>
 
     <input type="radio" id="blue" name="color" value="blue">
     <label for="blue">青</label>
 
     <input type="radio" id="green" name="color" value="green">
     <label for="green">緑</label>
   </div>
 </form>

グループ化を視覚的にも明確にする場合は、fieldsetおよびlegendを使用する。
これにより、グループに枠線が付き、legendでグループのタイトルが表示される。

 <form>
   <fieldset>
     <legend>好きな色を選んでください：</legend>
 
     <input type="radio" id="red" name="color" value="red">
     <label for="red">赤</label>
 
     <input type="radio" id="blue" name="color" value="blue">
     <label for="blue">青</label>
 
     <input type="radio" id="green" name="color" value="green">
     <label for="green">緑</label>
   </fieldset>
 </form>