明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

HTML如何完成RadioButton單選按鈕

發(fā)表時間：2023-08-28 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]用HTML來實現(xiàn)RadioButton，需要使用input標簽，其中type指定為radio，接下來的文章我們就來說一說詳細的內(nèi)容。我們先來看input標簽的格式<input id="(id)" name="(組名稱)" type="radi...
用HTML來實現(xiàn)RadioButton，需要使用input標簽，其中type指定為radio，接下來的文章我們就來說一說詳細的內(nèi)容。

RadioButton

我們先來看input標簽的格式

<input id="(id)" name="(組名稱)" type="radio"></input>

注：對于需要選中檢索的值，可以利用表單的提交或使用JavaScript獲取。

我們來看具體的示例

代碼如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <form name="form1" action="">
    <input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">單選按鈕 元素1</label><br/>
    <input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">單選按鈕 元素2</label><br />
    <input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">單選按鈕 元素3</label><br />
  </form>
  <div id="output"></div>
</body>
</html>

運行結(jié)果

使用Web瀏覽器打開上述HTML文件時，將顯示如下所示的效果。

RadioButton

單擊以更改單選按鈕的選中狀態(tài)

2345截圖20181205104009.png

在多個組中使用RadioButton時

代碼如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <form name="form1" action="">
    <div style="margin:16px;border:dotted 1px #202020;">
      <input id="Radio1" name="group01" type="radio" /><label for="Radio1">單選項目1</label><br />
      <input id="Radio2" name="group01" type="radio" /><label for="Radio2">單選項目2</label><br />
      <input id="Radio3" name="group01" type="radio" /><label for="Radio3">單選項目3</label><br />
    </div>
    <div id="output1"></div>
    <div style="margin:16px;border:dotted 1px #202020;">
      <input id="Radio4" name="group02" type="radio" /><label for="Radio4">單選項目4</label><br />
      <input id="Radio5" name="group02" type="radio" /><label for="Radio5">單選項目5</label><br />
      <input id="Radio6" name="group02" type="radio" /><label for="Radio6">單選項目6</label><br />
    </div>
    <div id="output2"></div>
  </form>
</body>
</html>

說明：

要將單選按鈕分成多個組，請將每個組的name屬性設置為不同名稱。在上面的例子中，Radio 1，Radio 2，Radio 3的name屬性是group 1。Radio 4，Radio 5，Radio 6的name屬性是第2組。

運行結(jié)果

使用Web瀏覽器打開上述HTML文件時，將顯示如下所示的效果。

2345截圖20181205110455.png

每組都是分開的，單選按鈕的選擇是獨立的。

RadioButton

以上就是HTML如何實現(xiàn)RadioButton單選按鈕的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。