HTML input radio 單選按鈕

admin發表於2019-09-21
HTML

<input> 標籤 type 屬性值設定為 "radio"，即可建立一個單選按鈕。

既然是單選按鈕，按鈕之間通常互斥，同一時刻只能有一項處於選中狀態。

下面通過程式碼例項對單選按鈕進行詳細演示，首先看一段程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  性別：
  <input type="radio" name="sex" value="1" />男
  <input type="radio" name="sex" value="2" />女
</form>
</body>
</html>

上面程式碼簡單演示了單選按鈕的使用，只能夠選中其中一項。

特別說明：

（1）.name 屬性是必須的，否則後臺無法接收提交的表單資料。

（2）.互斥的單選按鈕的 name 屬性值必須是相同的，否則可以多選。

單選按鈕還有其他屬性，下面分別做一下介紹：

（1）.value：規定單選的value屬性值，它會被髮送到伺服器。

（2）.checked：規定單選按鈕處於選中狀態。

（2）.required（HTML5）：規定對應單選按鈕是必選。

（3）.form（HTML5）：規定單選按鈕所屬的一個或多個表單。

（4）.autofocus（HTML5）：規定在頁面載入時，對應單選按鈕自動地獲得焦點。

（5）.disabled：規定單選按鈕不可用。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  興趣：
  <input type="radio" name="favorite" value="1" />前端
  <input type="radio" name="favorite" value="2" />後端
  <input type="radio" name="ant" value="3" />美工
</form>
</body>
</html>

文章的開頭部分講過，單選按鈕是互斥的，只能夠選中其中一項，但是為什麼最後一個單選按鈕總能夠被選中。這是因為只有name屬性值相同的單選按鈕才是互斥的，只有name屬性值相同的單選按鈕才算作是同一組。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  興趣：
  <input type="radio" name="favorite" value="1" />前端
  <input type="radio" checked name="favorite" value="2" />後端
  <input type="radio" name="favorite" value="3" />美工
</form>
</body>
</html>

使用checked屬性可以設定一個單選按鈕處於預設選中狀態。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  興趣：
  <input type="radio" name="favorite" value="1" />前端
  <input type="radio" required name="favorite" value="2" />後端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

required屬性規定指定單選按鈕是必選的。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  興趣：
  <input type="radio" name="favorite" value="1" />前端
  <input type="radio" autofocus name="favorite" value="2" />後端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

autofocus可以規定對應的單選按鈕在頁面載入後自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  興趣：
  <input type="radio" name="favorite" value="1" />前端
  <input type="radio" disabled name="favorite" value="2" />後端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

設定對應單選按鈕為不可用，不可用狀態的表單元素值不會被提交。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  興趣：
  <input type="radio" name="favorite" value="1" />前端
  <input type="radio" disabled name="favorite" value="2" />後端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表單"/>
</form>
興趣:<input type="text" form="ant" name="favorite">
</body>
</html>

form屬性引用所屬表單的id，於是，雖然單選按鈕在<form>之外，但依然是該表單的一部分。

相關文章