ラジオボタンを作る

<input type=”radio” name=”” value=””>

ラジオボタンは複数の項目から一つの項目を選ぶようなボタンです。チェックボックスと異なるのは、ラジオボタンは1つのグループ内では複数の項目を選択することができません。用途に合わせて使用してください。

INPUTタグに「type=”radio”」という属性を追加します。
さらに、グループ名は「name=””」という属性で指定します。1つのグループ内の各ラジオボタンが属するグループ名は同じ名前にする必要があります。こうすることでグループ内の複数の項目から1つを選択できるようになります。

また、各グループ内のラジオボタンの項目名を指定するには「value=””」という属性を追加します。ただし、これはあくまで識別のためであり、valueに入力した項目名は実際には表示されません。改めてラジオボタンの横に項目を記述する必要があります。

また、1つのラジオボタンを最初から選択された状態にすることもできます。この場合は「checked」をINPUTタグ内に書き入れます。ただし、1つのグループで1つのラジオボタンにのみ有効です。

フォームの内容を外部のスクリプトで処理する場合、実際にスクリプトへ送信される内容は「value=””」に書かれた内容であることが多いようです。

記述例

<form action=”#”>
<input type=”radio” name=”グループ1″ value=”項目1″ checked>はい
<input type=”radio” name=”グループ1″ value=”項目2″>いいえ<br>
<input type=”radio” name=”グループ2″ value=”項目1″>YES
<input type=”radio” name=”グループ2″ value=”項目2″checked>NO
</form>


はいいいえ
YESNO
INPUTタグは単体では動作しません。必ずフォームタグの中に挿入してください。

関連情報

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

最新のHTML5を学ぶなら

参考情報

最新情報をチェックしよう!