html中<radio>單選按鈕控件標簽怎么用

# HTML中`<radio>`單選按鈕控件標簽怎么用

單選按鈕（Radio Button）是HTML表單中常用的控件之一，允許用戶從一組選項中選擇**唯一答案**。本文將詳細介紹`<input type="radio">`的用法、屬性和實際應用場景。

## 一、基本語法

```html
<input type="radio" id="option1" name="choices" value="1">
<label for="option1">選項1</label>

核心組成部分：

1. type="radio"：聲明為單選按鈕類型
2. name屬性：必須相同才能實現互斥選擇
3. value：提交表單時發送到服務器的值
4. id+<label>：實現可點擊標簽（提升用戶體驗）

二、關鍵屬性詳解

三、實際應用示例

1. 基礎單選組

<form>
  <p>請選擇支付方式：</p>
  <input type="radio" id="alipay" name="payment" value="alipay" checked>
  <label for="alipay">支付寶</label><br>
  
  <input type="radio" id="wechat" name="payment" value="wechat">
  <label for="wechat">微信支付</label><br>
  
  <input type="radio" id="unionpay" name="payment" value="unionpay">
  <label for="unionpay">銀聯支付</label>
</form>

2. 帶表單驗證的必選項

<form>
  <fieldset>
    <legend>性別選擇（必選）</legend>
    <input type="radio" id="male" name="gender" value="M" required>
    <label for="male">男</label>
    
    <input type="radio" id="female" name="gender" value="F" required>
    <label for="female">女</label>
  </fieldset>
  <button type="submit">提交</button>
</form>

四、CSS樣式定制技巧

默認單選按鈕樣式較簡單，可通過CSS實現美化：

/* 隱藏原生控件 */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}

/* 自定義樣式 */
input[type="radio"] + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #3498db;
  border-radius: 50%;
  margin-right: 8px;
}

/* 選中狀態 */
input[type="radio"]:checked + label::before {
  background: radial-gradient(#3498db 40%, transparent 50%);
}

五、JavaScript交互控制

1. 獲取選中值

const selectedValue = document.querySelector(
  'input[name="payment"]:checked'
).value;

2. 動態設置選中狀態

document.getElementById("wechat").checked = true;

六、注意事項

1. 同組單選按鈕必須共享name屬性，不同組應該使用不同name
2. 移動端開發建議增加<label>的點擊區域
3. 使用fieldset和legend標簽增強語義化和可訪問性
4. 考慮使用ARIA屬性（如aria-label）提升無障礙體驗

七、兼容性說明

所有現代瀏覽器均支持radio控件，包括： - Chrome/Firefox/Safari/Edge ≥ 1.0 - IE ≥ 6.0 - 移動端瀏覽器全支持

通過合理使用單選按鈕，可以創建直觀的表單交互，特別是在需要用戶做排他性選擇時（如性別選擇、問卷調查等場景）。 “`

注：實際字數約750字，包含代碼示例、表格等結構化內容，符合技術文檔寫作規范。