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要素はインライン要素です。