HTML

ラジオボタン

詳細を開く 詳細を閉じる

HTMLコード

<input>type属性 - radio

テキスト型
textテキストボックス
passwordパスワード
number数値
emailメールアドレス
urlURL
tel電話番号
search検索語
ボタン型
submit送信ボタン
resetリセットボタン
button一般のボタン
image画像ボタン(送信)
特殊型
radioラジオボタン
checkboxチェックボックス
hidden隠しエリア
fileファイル送信
range数値レンジ
colorカラーパレット
日付型
date日付
datetime日付と時刻
datetime-localローカルタイム
month
time時刻
week
  • <input>type属性にradioを指定すると、ラジオボタンになります。
  • チェックボックスと異なり、1つのグループから1つのみ選べます(name属性が同じものは、同じグループになります)
  • リセットボタンをクリックすると、選択が解除されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<input type="radio" name="r1" value="aaa">aaa
<input type="radio" name="r1" value="bbb">bbb
<input type="radio" name="r1" value="ccc">ccc

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

ラベル : <label>

  • ラジオボタンは常に<label>要素と共に使いましょう。
  • 上の例では、「aaa」、「bbb」などの文字列をクリックしても選択できません。ユーザが混乱する原因となるので<label>は必須です。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="radio" name="r1" value="aaa">aaa</label>
<label><input type="radio" name="r1" value="bbb">bbb</label>
<label><input type="radio" name="r1" value="ccc">ccc</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

グループ化 : <fieldset>

  • まとまりが分かりにくい場合、<fieldset>要素を使った方が良いかもしれません。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<fieldset>
	<legend>r1</legend>
	<label><input type="radio" name="r1" value="aaa">aaa</label>
	<label><input type="radio" name="r1" value="bbb">bbb</label>
	<label><input type="radio" name="r1" value="ccc">ccc</label>
</fieldset>

<fieldset>
	<legend>r2</legend>
	<label><input type="radio" name="r2" value="ddd">ddd</label>
	<label><input type="radio" name="r2" value="eee">eee</label>
</fieldset>
	
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

初期値 : checked

  • 初期値はchecked属性で設定できます。
  • リセットボタンをクリックすると、初期値に戻ります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="radio" name="r1" value="aaa">aaa</label>
<label><input type="radio" name="r1" value="bbb" checked>bbb</label>
<label><input type="radio" name="r1" value="ccc">ccc</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

選択必須 : required

  • 選択必須の項目はrequired属性で設定できます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="radio" name="r1" value="aaa" required>aaa</label>
<label><input type="radio" name="r1" value="bbb">bbb</label>
<label><input type="radio" name="r1" value="ccc">ccc</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

セレクトボックス : <select>

  • ラジオボタンと同様の機能は<select>でも実現できます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<fieldset>
	<legend>r1</legend>
	<label><input type="radio" name="r1" value="aaa">aaa</label>
	<label><input type="radio" name="r1" value="bbb">bbb</label>
	<label><input type="radio" name="r1" value="ccc">ccc</label>
</fieldset>

<fieldset>
	<legend>s1</legend>
	<select name="s1" size="3">
		<option value="aaa">aaa</option>
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
    </select>
</fieldset>
	
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>
  • 選択肢が少ない場合(たとえば性別)は「ラジオボタン」の方が良いかもしれません。
性別
<select>
<select> size required
ラジオボタン required
  • しかし、選択肢が多い場合(たとえば都道府県)は<select>(および<optgroup>)を使った方が良いでしょう。
都道府県
<select>
<select> <optgroup>
ラジオボタン required

CSSコード

CSSなし


別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label class="label">
	<input class="radio" type="radio" name="r1" value="aaa">aaa
</label>
<label class="label">
	<input class="radio" type="radio" name="r1" value="bbb">bbb
</label>
<label class="label">
	<input class="radio" type="radio" name="r1" value="ccc">ccc
</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

色 : color/background


別ウィンドウで表示
/* CSSファイル */
.label {
	color:			brown;
	background:		khaki;
}
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ