HTML

input type=”radio” – 文字をクリックしたら選択する方法

radioボックス等で文字をクリックしたら選択されるようにするには下記の方法があります。

inputタグのid=””とlabelタグのfor=””の属性値を統一する

こちらのやり方は<input>タグのid属性と<label>タグのfor属性の属性値を統一することで文字をクリックすると選択できる状態になります。

下記のコードのように、input要素とlabel要素のid属性とfor属性の値を統一することで文字をクリックするとチェックできるようになります。

<fieldset>
	<legend>性別</legend>
	<div>
		<input type="radio" id="man" name="gender" value="man" checked> 	
		<label for="man">男</label>
	</div>
	<div>
		<input type="radio" id="woman" name="gender" value="woman">
		<label for="woman">女</label>
	</div>
</fieldset>

inputタグをlabelタグで囲む

この方法は先ほどの方法とは違ってlabelタグの中にinputタグを入れることで文字をクリックすることで選択できるようになります。

for属性とid属性を記述しなくて済むので楽かもしれません。

<h2>好きな言語はどれですか？</h2>
<form action="" method="post">
	<label>HTML <input type="radio" name="tag" value="html"> </label>
	<label>CSS <input type="radio" name="tag" value="css"> </label>
	<label>JavaScript <input type="radio" name="tag" value="javascript"> </label>
	<input type="submit">
</form>

参考文献