【HTML】inputタグのラジオボタンの概要

投稿者: | 2021年1月6日
radio

 

本日はHTMLのinputのラジオボタンについて解説していきたいと思います。

それではいってみましょう!

 

radioの概要

一つのみを選択させたい場合にname属性値を同じ名前にすることでどれか一つが選択されます。

属性

type → radioを指定するとラジオボタンが作成されます。

name → name属性値を一緒の名前にしてグループ化します。

value → value属性値を指定することで遷移先で取得できます。

checked → 初期の選択を指定できます。

 

サンプル例

下記のようにブラウザに表示されます。

ラジオボタンはどれか一つのみ選択が可能です。

男の属性にchecked=”checked”とすることで初期に男が選択された状態になります。



 

ラジオボタンとチェックボックスの違い

 

まとめ

今回はラジオボタンについて解説しましたがname属性値を同じ名前にすることでグループ化され、どれか1つのみの値を取得したい場合に使用されます。

HTML単体では特に使用する機会はありませんがPHPのGETやPOST、データベースと最終的には連携させていきます。

以上です。