雖然似乎每年都會推出新的網絡技術來吸引訪問者，但有些技術經受住了時間的考驗，不會消失。在這篇文章中，成都小程序設計將討論這樣一個元素，即不起眼的HTML單選按鈕。

從聯系表格到多項選擇測試，您以前可能見過單選按鈕（即使您不確切知道它們叫什么）。如果您想從網站前端收集用戶信息，這些圓形元素是必須了解的。

方便的是，HTML有一個內置的單選按鈕輸入類型，并且在頁面上實現它們非常簡單。在這里，我們將回顧什么是單選按鈕、何時使用它們以及如何使用HTML中的單選按鈕編寫表單。

什么是HTML單選按鈕？

在HTML中，單選按鈕是一種交互式頁面元素，用于從多個選項中選擇一個選項。取消選擇時，單選按鈕顯示為空圓圈。當用鼠標單擊或用鍵盤選擇時，圓圈會填充以指示選擇，單選按鈕與標簽配對（通常是文本，有時是圖像）-這是用戶在選擇特定單選按鈕時所選擇的內容。

單選按鈕幾乎總是以兩個或多個為一組出現，以表示相關的、互斥的選項。在這組選項中，用戶一次只能選擇一個。這意味著選擇一個單選按鈕會取消選擇組中另一個選定的按鈕。此外，用戶無法通過單擊單選按鈕來取消選擇它。取消選擇單選按鈕的唯一方法是選擇組中的另一個選項。

單選按鈕與復選框

單選按鈕類似于另一個常見的交互元素，即復選框。兩者之間的差異很小，但值得注意：單選按鈕允許用戶為每組選擇一個選項，而復選框則讓用戶為每組選擇（或“選中”）一個、多個或不選擇選項。用戶還可以通過單擊取消選擇復選框-單選按鈕不允許這樣做。

我承認這不是最激動人心的話題。然而，混淆這兩者可能會導致訪問者嚴重困惑。因此，請務必使用“選擇一個”菜單的單選按鈕，并為“選擇所有適用的”菜單或一次性問題保留復選框（即“如果……請選中此框”）。

現在我們了解了HTML單選按鈕的用途，接下來讓我們學習如何制作它們。

如何在HTML中制作單選按鈕

要在HTML中創建單選按鈕，請使用帶有radio類型的<input>元素。

這里我們有三個radio類型的<input>元素，還有一些新屬性。每個<input>還有一個新的<label>元素。讓我們回顧一下我們添加到代碼中的每一項內容。

首先，id屬性是<input>標記的唯一標識符。它可以用作單選按鈕元素的CSS選擇器，并且還將按鈕與其相應的<label>聯合起來。

如前所述，單選按鈕是成組的。使用所需的名稱屬性將一組相關的單選按鈕分組在一起。在上面的示例中，所有<input>共享相同的name值，因此它們被視為同一組的一部分。這讓用戶一次只能選擇一組中的一個選項-試試上面的方法。

接下來，value屬性表示單選按鈕的唯一值。用戶看不到它，但它被提交以代表所選的選項。例如，如果提交上面的表單時選擇了“17歲或以下”項目，則處理該表單的系統將收到值Age=child。如果用戶未選擇任何單選按鈕，則不會發送任何值。如果所選選項缺少值屬性，則表單將發送默認值。

請注意，<input>標記僅創建單選按鈕元素，而不是標簽。要為單選按鈕添加標簽，請在<input>元素后面添加一個<label>元素，并插入一個與關聯<input>元素的id具有相同值的for屬性。然后，在<label>標記中寫入標簽文本。

雖然使用<label>并不是絕對必要的，但由于兩個原因，它被認為是最佳實踐。首先，語義豐富的<label>元素使使用屏幕閱讀器的人更容易訪問您的網站。它告訴他們哪個標簽與哪個單選按鈕配對。其次，for屬性允許用戶通過單擊標簽本身以及按鈕來選擇單選按鈕，從而使表單更易于使用。

最后，<br>（換行符）標記將每個選項放在一個新行上。嘗試刪除上面示例中的這些標簽，將所有選項放在同一行。

最后成都小程序設計提醒一下，請確保您在正確的情況下使用單選按鈕。當您希望用戶從一組中僅選擇一個選項時，請記住使用單選按鈕；如果您希望允許用戶選擇多個選項并取消選中他們的選擇，請記住使用復選框。