radio

input要素のtype属性にradioを指定すると、ラジオボタンになる。

ブラウザ対応

構文

<input type="radio">

属性

属性 説明
autofocus属性 オートフォーカスさせる属性。
checked属性 選択済みにする属性。
disabled属性 無効にする属性。
form属性 属するform要素のid属性値を指定する属性。
name属性 名前を指定する属性。
required属性 入力を必須にする属性。
value属性 値を指定する属性。ラジオボタンにおいては、選択したラジオボタンのvalue属性値を、送信データに含める。

サンプルコード

ラジオボタン： <input type="radio" name="sampleName" value="値">

複数の選択肢

複数の選択肢から１つだけ選択できるようにするには、name属性に指定する名前を揃える。

<label>
	ラジオボタンＡ：
	<input type="radio" name="sampleName" value="値Ａ">
</label>
<br>
<label>
	ラジオボタンＢ：
	<input type="radio" name="sampleName" value="値Ｂ">
</label>
<br>
<label>
	ラジオボタンＣ：
	<input type="radio" name="sampleName" value="値Ｃ">
</label>

入力を必須にする

複数の選択肢があるラジオボタンにおいて、何れか１つの選択肢にrequired属性を指定すると、何れか１つを選択しなければならないようになる。

<label>
	ラジオボタンＡ：
	<input type="radio" name="sampleName" value="値Ａ" required>
</label>
<br>
<label>
	ラジオボタンＢ：
	<input type="radio" name="sampleName" value="値Ｂ">
</label>
<br>
<label>
	ラジオボタンＣ：
	<input type="radio" name="sampleName" value="値Ｃ">
</label>

選択済みにする

複数の選択肢があるラジオボタンにおいて、checked属性を使い、何れか１つの選択肢だけを選択済みにすることができる。

<label>
	ラジオボタンＡ：
	<input type="radio" name="sampleName" value="値Ａ" checked>
</label>
<br>
<label>
	ラジオボタンＢ：
	<input type="radio" name="sampleName" value="値Ｂ">
</label>
<br>
<label>
	ラジオボタンＣ：
	<input type="radio" name="sampleName" value="値Ｃ">
</label>

サンプル

HTMLソースコード

<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			ラジオボタンＡ：
			<input type="radio" name="sampleName" value="値Ａ" required>
		</label>
		<br>
		<label>
			ラジオボタンＢ：
			<input type="radio" name="sampleName" value="値Ｂ">
		</label>
		<br>
		<label>
			ラジオボタンＣ：
			<input type="radio" name="sampleName" value="値Ｃ">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>

実際の表示