【HTML】radioの使い方をまとめてみた

【HTML】radioの使い方をまとめてみた

　ラジオボタンを作成するには、<input type=”radio”>で作成することができます。

<input type="radio">

↓↓表示結果↓↓

　ラジオボタンでは、name属性やvalue属性でボタンの名前や値を設定したり、checked属性であらかじめ選択した状態にすることができます。

name属性　

　ラジオボタンの名前を設定します。データが送信されるときに、ラジオボタンの名前と値がセットで送られます。

　また、ラジオボタンは名前ごとに一つしか選択できないため、同一の名前のラジオボタンが複数存在する場合、一つの項目が選択されると同一の名前のラジオボタンの選択はクリアされます。

<input type="radio" name="test">テスト<br>
<input type="radio" name="test">テスト2<br>
<input type="radio" name="test">テスト3<br>
<input type="radio" name="test2">テスト<br>
※上の３つはいずれか１つのみ選択可能
※最後はnameが違うため影響を受けない

↓↓表示結果↓↓

テスト
テスト2
テスト3
テスト
※上の３つはいずれか１つのみ選択可能
※最後はnameが違うため影響を受けない

value属性

 name属性の値とともにサーバーへ送られる値を指定します。

<input type="radio" value="test">テスト<br>

↓↓表示結果↓↓

テスト

表示状態に変化はありません。

checked属性

 ボタンがあらかじめ選択された状態で表示されます。

<input type="radio" checked="checked">テスト<br>

↓↓表示結果↓↓

テスト

ボタンがチェックされた状態で表示されていることが確認できました。

HTML の記事一覧へ