HTML radio怎麼分組：聯絡方式與需求別互相取消

替網站加上聯絡表單，常會遇到兩個單選問題：訪客想用Email還是電話聯絡？需要挑選模板還是修改網站？如果選完需求，原本的聯絡方式卻被取消，先檢查兩組radio是不是用了同一個name。

同一組用相同name，不同問題要分開

瀏覽器用name判斷哪些radio互相排斥。聯絡方式共用contact，網站需求共用need；兩個name不同，就能各選一項。id則用來讓label對應到個別欄位，不能拿它代替分組。

<fieldset>
  <legend>希望怎麼聯絡？</legend>
  <label><input type="radio" name="contact" value="email" checked>Email</label>
  <label><input type="radio" name="contact" value="phone">電話</label>
</fieldset>
<fieldset>
  <legend>想處理什麼？</legend>
  <label><input type="radio" name="need" value="template" checked>挑選模板</label>
  <label><input type="radio" name="need" value="customize">修改網站</label>
</fieldset>

點文字也能選，問題名稱要看得懂

把input放進label，訪客點「電話」文字也能選取。fieldset配合legend交代這組選項在問什麼，比把四個圓點排在一起清楚。先保留原生radio，再調整周圍間距；不要只畫一個好看的圓圈，卻失去鍵盤操作與選取狀態。

送出前看value，不只看畫面

這個例子選「電話」和「修改網站」，表單資料應是contact=phone、need=customize。顯示文字給人看，value才是收件程式讀到的值。沒有選取的radio群組不會出現在提交資料；若這個問題必答，可加入required，並在接收端再次確認允許的值。

radio只處理選擇，不會自己寄信。接到網站表單時，仍要另外接好接收、驗證與回覆訊息。你可以先在自己的測試頁切換兩組選項，再用Tab與方向鍵確認能操作，最後查看實際提交值是否各有一份。

參考資料

資料核對於2026年10月3日；實際介面與文件可能更新。