ホームページ作成TOP > フォームを設置する > 選択項目(ラジオボタン)
選択項目(ラジオボタン)を設置
選択項目(ラジオボタン)を設置して、訪問者に選択してもらう事で、選択項目を選択しやすいページが作成できます。
選択項目を設置する場合に下記の様に『チェックボックス』と『ラジオボタン』の2つには、違いがあります。
複数選択範囲から複数を選択や、 スイッチとしてON/OFFを切り替える |
|
複数個選択範囲から1個を選択する場合 |
(このラジオボタンは少し小さいく、基本的にはサイズを大きくできない事からマウスで選択しにくい欠点があります。のみで良ければ選択項目(ラジオボタン・チェックボックス)のサイズを変えるにて紹介してます。)
この場合には、文字情報と、ラジオボタンを同時に選択できる様にする事でマウスで選択しやすくする事ができます。これについては選択項目(ラジオボタン・チェックボックス)と文字を同時選択可能にするを見てください。
sample
HTML <input type="radio" name="●">
選択項目(ラジオボタン)を設置するには、<input>のtype="●"に対してradioを設定してtype="radio"にて指定する事でラジオボタンになります。
このラジオボタンは、複数個のラジオボタンを同時に使用する事で、選択範囲から1つ選択させる事が可能になります。
複数個を1組のグループにする事で、グループ内の1個を選択可能になります。このグループは、それぞれのラジオボタンのname="●"を同じにする事で設定できます。
上記サンプルでは、上段が『name="r1"』下段が『name="r2"』になってますので、上段下段それぞれ1個選択可能になります。
書き方
<form name="sample">
<input type="radio" value="r1" name="r1">項目1-1
<input type="radio" value="r2" name="r1">項目1-2
<input type="radio" value="r3" name="r1">項目1-3<br>
<input type="radio" value="r3" name="r2">項目2-1
<input type="radio" value="r3" name="r2">項目2-2
<input type="radio" value="r3" name="r2">項目2-3
</form>
こうなります
ホームページ作成TOP > フォームを設置する > 選択項目(ラジオボタン) > このページのTOP ▲
スポンサードリンク
無料メール情報誌
ワンランクUP講座
ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。
サイト内検索
おすすめ1冊
全体レイアウトを実際のサイト事例を使用し、詳細までを解説。
スタイルシートの使い方のバリエーションを知る事ができる1冊。
スタイルシートの使い方のバリエーションを知る事ができる1冊。
おすすめソフト
Webデザインに最適な新しいインタフェイスを備え、Webグラフィックをより簡単・効率的に制作することができます。
検証結果