雖然似乎每年都會(huì)推出新的網絡技(jì)術(shù)來(lái)吸引訪問者，但(dàn)有(yǒu)些(xiē)技(jì)術(shù)經受住了時(shí)間(jiān)的考驗，不會(huì)消失。在這篇文章中，成都網站(zhàn)建設将討(tǎo)論這樣一個(gè)元素，即不起眼的HTML單選按鈕。
從聯系表格到多(duō)項選擇測試，您以前可(kě)能見過單選按鈕（即使您不确切知道(dào)它們叫什麽）。如果您想從網站(zhàn)前端收集用戶信息，這些(xiē)圓形元素是必須了解的。
方便的是，HTML有(yǒu)一個(gè)內(nèi)置的單選按鈕輸入類型，并且在頁面上(shàng)實現它們非常簡單。在這裏，我們将回顧什麽是單選按鈕、何時(shí)使用它們以及如何使用HTML中的單選按鈕編寫表單。
什麽是HTML單選按鈕？
在HTML中，單選按鈕是一種交互式頁面元素，用于從多(duō)個(gè)選項中選擇一個(gè)選項。取消選擇時(shí)，單選按鈕顯示為(wèi)空(kōng)圓圈。當用鼠标單擊或用鍵盤選擇時(shí)，圓圈會(huì)填充以指示選擇，單選按鈕與标簽配對（通(tōng)常是文本，有(yǒu)時(shí)是圖像）-這是用戶在選擇特定單選按鈕時(shí)所選擇的內(nèi)容。
單選按鈕幾乎總是以兩個(gè)或多(duō)個(gè)為(wèi)一組出現，以表示相關的、互斥的選項。在這組選項中，用戶一次隻能選擇一個(gè)。這意味着選擇一個(gè)單選按鈕會(huì)取消選擇組中另一個(gè)選定的按鈕。此外，用戶無法通(tōng)過單擊單選按鈕來(lái)取消選擇它。取消選擇單選按鈕的唯一方法是選擇組中的另一個(gè)選項。
單選按鈕與複選框
單選按鈕類似于另一個(gè)常見的交互元素，即複選框。兩者之間(jiān)的差異很(hěn)小(xiǎo)，但(dàn)值得(de)注意：單選按鈕允許用戶為(wèi)每組選擇一個(gè)選項，而複選框則讓用戶為(wèi)每組選擇（或“選中”）一個(gè)、多(duō)個(gè)或不選擇選項。用戶還(hái)可(kě)以通(tōng)過單擊取消選擇複選框-單選按鈕不允許這樣做(zuò)。
我承認這不是最激動人(rén)心的話(huà)題。然而，混淆這兩者可(kě)能會(huì)導緻訪問者嚴重困惑。因此，請(qǐng)務必使用“選擇一個(gè)”菜單的單選按鈕，并為(wèi)“選擇所有(yǒu)适用的”菜單或一次性問題保留複選框（即“如果……請(qǐng)選中此框”）。
現在我們了解了HTML單選按鈕的用途，接下來(lái)讓我們學習如何制(zhì)作(zuò)它們。
如何在HTML中制(zhì)作(zuò)單選按鈕
要在HTML中創建單選按鈕，請(qǐng)使用帶有(yǒu)radio類型的<input>元素。
這裏我們有(yǒu)三個(gè)radio類型的<input>元素，還(hái)有(yǒu)一些(xiē)新屬性。每個(gè)<input>還(hái)有(yǒu)一個(gè)新的<label>元素。讓我們回顧一下我們添加到代碼中的每一項內(nèi)容。
首先，id屬性是<input>标記的唯一标識符。它可(kě)以用作(zuò)單選按鈕元素的CSS選擇器(qì)，并且還(hái)将按鈕與其相應的<label>聯合起來(lái)。
如前所述，單選按鈕是成組的。使用所需的名稱屬性将一組相關的單選按鈕分組在一起。在上(shàng)面的示例中，所有(yǒu)<input>共享相同的name值，因此它們被視(shì)為(wèi)同一組的一部分。這讓用戶一次隻能選擇一組中的一個(gè)選項-試試上(shàng)面的方法。
接下來(lái)，value屬性表示單選按鈕的唯一值。用戶看不到它，但(dàn)它被提交以代表所選的選項。例如，如果提交上(shàng)面的表單時(shí)選擇了“17歲或以下”項目，則處理(lǐ)該表單的系統将收到值Age=child。如果用戶未選擇任何單選按鈕，則不會(huì)發送任何值。如果所選選項缺少(shǎo)值屬性，則表單将發送默認值。
請(qǐng)注意，<input>标記僅創建單選按鈕元素，而不是标簽。要為(wèi)單選按鈕添加标簽，請(qǐng)在<input>元素後面添加一個(gè)<label>元素，并插入一個(gè)與關聯<input>元素的id具有(yǒu)相同值的for屬性。然後，在<label>标記中寫入标簽文本。
雖然使用<label>并不是絕對必要的，但(dàn)由于兩個(gè)原因，它被認為(wèi)是最佳實踐。首先，語義豐富的<label>元素使使用屏幕閱讀器(qì)的人(rén)更容易訪問您的網站(zhàn)。它告訴他們哪個(gè)标簽與哪個(gè)單選按鈕配對。其次，for屬性允許用戶通(tōng)過單擊标簽本身以及按鈕來(lái)選擇單選按鈕，從而使表單更易于使用。
最後，<br>（換行(xíng)符）标記将每個(gè)選項放在一個(gè)新行(xíng)上(shàng)。嘗試删除上(shàng)面示例中的這些(xiē)标簽，将所有(yǒu)選項放在同一行(xíng)。
最後成都網站(zhàn)建設提醒一下，請(qǐng)确保您在正确的情況下使用單選按鈕。當您希望用戶從一組中僅選擇一個(gè)選項時(shí)，請(qǐng)記住使用單選按鈕；如果您希望允許用戶選擇多(duō)個(gè)選項并取消選中他們的選擇，請(qǐng)記住使用複選框。
