<input type="radio">
型別為 radio 的 <input> 元素通常用於 單選組——描述一組相關選項的單選按鈕集合。
在給定的組中，一次只能選擇一個單選按鈕。單選按鈕通常呈現為小的圓圈，選中時會填充或突出顯示。
試一試
它們被稱為單選按鈕，因為它們的外觀和操作方式類似於老式收音機上的按鈕，如下所示。
注意：複選框 與單選按鈕類似，但有一個重要的區別：單選按鈕用於在一組值中選擇一個值，而複選框允許你開啟或關閉各個值。在存在多個控制元件的情況下，單選按鈕允許從所有控制元件中選擇一個，而複選框允許選擇多個值。
值
value 屬性是一個字串，包含單選按鈕的值。該值永遠不會由使用者的使用者代理顯示給使用者。相反，它用於識別組中哪個單選按鈕被選中。
定義單選組
單選組透過為組中的每個單選按鈕賦予相同的name來定義。一旦建立了單選組，選擇該組中的任何單選按鈕都會自動取消選擇該組中當前選中的任何單選按鈕。
您可以在一個頁面上建立任意數量的單選組，只要每個組都有自己唯一的name即可。
例如，如果您的表單需要詢問使用者首選的聯絡方式，您可以建立三個單選按鈕，每個按鈕的name屬性都設定為contact，但一個值為email，一個值為phone，一個值為mail。使用者永遠不會看到value或name（除非您明確新增程式碼來顯示它）。
生成的 HTML 如下所示
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
在這裡，您可以看到三個單選按鈕，每個按鈕的name都設定為contact，並且每個按鈕都有一個唯一的value，該值在組內唯一標識該單個單選按鈕。它們還各自都有一個唯一的id，該id由<label>元素的for屬性用來將標籤與單選按鈕關聯起來。
您可以在此處嘗試此示例
單選組的資料表示
當以上表單提交時，如果選擇了單選按鈕，則表單資料將在表單中包含一個contact=value的條目。例如，如果使用者單擊“電話”單選按鈕然後提交表單，則表單資料將包含行contact=phone。
如果在 HTML 中省略了value屬性，則提交的表單資料會將值on分配給該組。在這種情況下，如果使用者單擊“電話”選項並提交表單，則生成的表單資料將為contact=on，這沒有幫助。因此，不要忘記設定您的value屬性！
注意：如果提交表單時沒有選中任何單選按鈕，則單選組根本不會包含在提交的表單資料中，因為沒有值要報告。
實際上，允許表單在組中沒有任何單選按鈕被選中時提交的情況相當少見，因此通常明智的做法是將一個預設設定為checked狀態。請參閱下面預設選中單選按鈕。
讓我們在示例中新增一些程式碼，以便我們可以檢查此表單生成的資料。HTML 已修改為新增一個<pre>塊來輸出表單資料
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
<pre id="log"></pre>
然後，我們新增一些JavaScript來在submit事件上設定一個事件偵聽器，該事件在使用者單擊“提交”按鈕時傳送
const form = document.querySelector("form");
const log = document.querySelector("#log");
form.addEventListener(
"submit",
(event) => {
const data = new FormData(form);
let output = "";
for (const entry of data) {
output = `${output}${entry[0]}=${entry[1]}\r`;
}
log.innerText = output;
event.preventDefault();
},
false,
);
嘗試此示例，看看contact組的結果永遠不會超過一個。
其他屬性
除了所有<input>元素共有的常見屬性外，radio輸入還支援以下屬性。
checked-
一個布林屬性，如果存在，則表示此單選按鈕是組中預設選中的一個。
與其他瀏覽器不同，Firefox 預設情況下保留
<input>的動態選中狀態跨頁面載入。使用autocomplete屬性來控制此功能。 value-
value屬性是所有<input>共有的屬性；但是，它對型別為radio的輸入具有特殊用途：當提交表單時，只有當前選中的單選按鈕才會提交到伺服器，並且報告的值是value屬性的值。如果未另行指定value，則預設為字串on。這在上面的值部分進行了演示。 required-
required屬性是大多數<input>共有的屬性。如果同一命名組中的任何單選按鈕具有required屬性，則必須選中該組中的一個單選按鈕，儘管不必是應用了該屬性的那個。
使用單選輸入
我們上面已經介紹了單選按鈕的基本知識。現在讓我們看看您可能需要了解的其他常見與單選按鈕相關的功能和技術。
預設選中單選按鈕
要使單選按鈕預設選中，您需要包含checked屬性，如先前示例的此修訂版本所示
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
checked />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
在這種情況下，第一個單選按鈕現在預設選中。
注意：如果將checked屬性放在多個單選按鈕上，則後面的例項將覆蓋前面的例項；也就是說，最後一個checked單選按鈕將是選中的那個。這是因為一個組中只能選擇一個單選按鈕，並且每次將一個新單選按鈕標記為選中時，使用者代理都會自動取消選擇其他單選按鈕。
為您的單選按鈕提供更大的點選區域
在以上示例中，您可能已經注意到，您可以透過單擊其關聯的<label>元素以及單選按鈕本身來選擇單選按鈕。這是 HTML 表單標籤的一個非常有用的功能，它使使用者更容易點選他們想要的選項，尤其是在智慧手機等小螢幕裝置上。
除了可訪問性之外，這是另一個在表單上正確設定<label>元素的充分理由。
驗證
在設定了required屬性的單選按鈕或至少一個成員具有required設定的相同命名組的單選按鈕的情況下，需要選中一個單選按鈕才能使控制元件被視為有效。如果未選中任何單選按鈕，則在驗證期間，valueMissing屬性的ValidityState物件將返回true，瀏覽器將要求使用者選擇一個選項。
樣式化單選輸入
以下示例顯示了我們在整篇文章中看到的示例的更完整版本，其中包含一些額外的樣式，並透過使用專門的元素建立了更好的語義。HTML 如下所示
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
checked />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
此示例中涉及的 CSS 稍微複雜一些
html {
font-family: sans-serif;
}
div:first-of-type {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
}
label {
margin-right: 15px;
line-height: 32px;
}
input {
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
}
button,
legend {
color: white;
background-color: black;
padding: 5px 10px;
border-radius: 0;
border: 0;
font-size: 14px;
}
button:hover,
button:focus {
color: #999;
}
button:active {
background-color: white;
color: black;
outline: 1px solid black;
}
這裡最值得注意的是appearance屬性的使用（需要字首才能支援某些瀏覽器）。預設情況下，單選按鈕（和複選框）使用作業系統的本機樣式來設定這些控制元件的樣式。透過指定appearance: none，您可以完全刪除本機樣式，併為其建立自己的樣式。在這裡，我們使用了border以及border-radius和transition來建立一個漂亮的動畫單選選擇。還要注意如何使用:checked偽類來指定選中時單選按鈕外觀的樣式。
注意：如果您希望使用appearance屬性，則應非常仔細地對其進行測試。儘管它在大多數現代瀏覽器中都受支援，但其實現差異很大。在舊版瀏覽器中，即使是關鍵字none在不同的瀏覽器中也不具有相同的效用，並且某些瀏覽器根本不支援它。在最新的瀏覽器中，差異較小。
請注意，當單擊單選按鈕時，當兩個按鈕更改狀態時，會出現一個漂亮的平滑淡出/淡入效果。此外，圖例和提交按鈕的樣式和顏色已自定義，以具有強對比度。這可能不是您在真實 Web 應用程式中想要的風格，但它絕對展示了可能性。
技術摘要
規範
| 規範 |
|---|
| HTML 標準 # radio-button-state-(type=radio) |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。
另請參閱
<input>和實現它的HTMLInputElement介面。RadioNodeList：描述單選按鈕列表的介面- CSS 屬性的相容性