「HTML - formタグ」の版間の差分

提供:MochiuWiki - SUSE, Electronic Circuit, PCB
ナビゲーションに移動 検索に移動
(ページの作成:「== 概要 == <br><br> == ラジオボタン == ==== グループ化 ==== ラジオボタンをグループ化するには、同じname属性値を設定する。<br> <br> 各ラジオボタンには個別のid属性値とvalue属性値を設定する。<br> <br> labelタグを使用して、ラジオボタンにラベルを付ける。<br> labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。<br> <br> <syntax…」)
 
3行目: 3行目:


== ラジオボタン ==
== ラジオボタン ==
==== ラジオボタンの基本 ====
ラジオボタンは、複数の選択肢から1つだけを選べる入力要素である。<br>
<br>
基本的な実装を以下に示す。<br>
* inputタグのtype属性を"radio"に指定する。
* 各選択肢には固有のvalue属性を設定する。
* checked属性で初期選択状態を設定できる。
<br>
また、アクセシビリティのためにlabelタグと組み合わせて使用する。<br>
<br>
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
<br>
<syntaxhighlight lang="html">
<!-- checked属性は初期選択を指す -->
<input type="radio" name="gender" value="male" checked>
<!-- disabled属性は選択不可を指す -->
<input type="radio" name="gender" value="female" disabled>
</syntaxhighlight>
<br>
==== グループ化 ====
==== グループ化 ====
ラジオボタンをグループ化するには、同じname属性値を設定する。<br>
ラジオボタンをグループ化するには、同じname属性値を設定する。<br>

2024年11月9日 (土) 03:40時点における版

概要



ラジオボタン

ラジオボタンの基本

ラジオボタンは、複数の選択肢から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>