如何將標籤與一組單選按鈕相關聯？

Question

我表明，在一般情況下，有標籤的兩種方式radio按鈕：

方法1：

<label>Male<input type="radio" name="gender" value="m"></label> 
<label>Female<input type="radio" name="gender" value="f"></label> 

方法＃2（使用for）：

<label for="id_male">Male</label> 
<input type="radio" id="id_male" name="gender" value="m"> 
<label for="id_female">Female</label> 
<input type="radio" id="id_female" name="gender" value="f"> 

但什麼如果需要將一組radio按鈕與label關聯？

即：

<label>What is your gender? 
    <label>Male<input type="radio" name="gender" value="m"></label> 
    <label>Female<input type="radio" name="gender" value="f"></label> 
</label> 

的問題是： 「你的性別是」

1. 是用於關聯的方式label以上，正確？

2. 有沒有辦法將「你的性別？」關聯起來對應於方法＃2（即使用for）？

Answer 1

使用方法＃2是這樣的：

<form action="" method="post"> 
 
    <fieldset> 
 
    <legend>What's your gender?</legend> 
 
     <label for="id_male">Male</label> 
 
     <input type="radio" id="id_male" name="gender" value="m"> 
 
     <label for="id_female">Female</label> 
 
     <input type="radio" id="id_female" name="gender" value="f"> 
 
    </fieldset> 
 
</form>

查看更多有關fieldset

Answer 2

一個好的解決方案是使用字段集/圖例組合：

這是fiddle