HTMLのラジオボタンを横並びや縦並びで表示する方法【現役エンジニアが解説】
今回は、HTMLのラジオボタンを横並びや縦並びで表示する方法について、それぞれに分け、簡単に解説していきます。
ラジオボタンを横並びで表示
type属性の値がradioのinput要素はラジオボタンになります。
label要素と一緒に使うことが一般的であり、配置は横並びとなります。
<label>
<input type="radio" name="color" value="red">赤
</label>
<label>
<input type="radio" name="color" value="blue">青
</label>
上記のコードでは、赤と青のどちらかの色を選択するラジオボタンを横並びで表示しています。
ラジオボタンを縦並びで表示
ラジオボタンのinput要素を含むlabel要素はインライン要素です。
縦並びにするには、label要素のスタイルのdisplayプロパティをblockに変更します。
<label style="display:block;">
<input type="radio" name="color" value="red">赤
</label>
<label style="display:block;">
<input type="radio" name="color" value="blue">青
</label>
上記のコードでは、赤と青のどちらかの色を選択するラジオボタンと項目名のセットを縦並びで表示しています。
ラジオボタンの初期値を設定
ラジオボタンの初期値を設定するには、input要素のchecked属性を設定します。
checked属性は、ただcheckedと書くだけで十分であり、値を設定する必要はありません。
<label>
<input type="radio" name="color" value="red" checked>赤
</label>
<label>
<input type="radio" name="color" value="blue">青
</label>
上記のコードでは、赤と青のどちらかの色を選択するラジオボタンを横並びで表示し、赤を初期選択させています。