雖然似乎每年都會推出新的網(wǎng)絡(luò)技術(shù)來吸引訪問者，但有些技術(shù)經(jīng)受住了時(shí)間的考驗(yàn)，不會消失。在這篇文章中，成都小程序開發(fā)將討論這樣一個(gè)元素，即不起眼的HTML單選按鈕。

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

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

什么是HTML單選按鈕？

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

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

單選按鈕與復(fù)選框

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

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

現(xiàn)在我們了解了HTML單選按鈕的用途，接下來讓我們學(xué)習(xí)如何制作它們。

如何在HTML中制作單選按鈕

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

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

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

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

接下來，value屬性表示單選按鈕的唯一值。用戶看不到它，但它被提交以代表所選的選項(xiàng)。例如，如果提交上面的表單時(shí)選擇了“17歲或以下”項(xiàng)目，則處理該表單的系統(tǒng)將收到值A(chǔ)ge=child。如果用戶未選擇任何單選按鈕，則不會發(fā)送任何值。如果所選選項(xiàng)缺少值屬性，則表單將發(fā)送默認(rèn)值。

請注意，<input>標(biāo)記僅創(chuàng)建單選按鈕元素，而不是標(biāo)簽。要為單選按鈕添加標(biāo)簽，請?jiān)?lt;input>元素后面添加一個(gè)<label>元素，并插入一個(gè)與關(guān)聯(lián)<input>元素的id具有相同值的for屬性。然后，在<label>標(biāo)記中寫入標(biāo)簽文本。

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

最后，<br>（換行符）標(biāo)記將每個(gè)選項(xiàng)放在一個(gè)新行上。嘗試刪除上面示例中的這些標(biāo)簽，將所有選項(xiàng)放在同一行。

最后成都小程序開發(fā)提醒一下，請確保您在正確的情況下使用單選按鈕。當(dāng)您希望用戶從一組中僅選擇一個(gè)選項(xiàng)時(shí)，請記住使用單選按鈕；如果您希望允許用戶選擇多個(gè)選項(xiàng)并取消選中他們的選擇，請記住使用復(fù)選框。