HTML input radio單選按鈕

admin發表於2018-10-24
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屬性值相同的單選按鈕才是互斥的。

[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屬性規定單選按鈕是必選的，只要在相同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" 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>之外，但依然是該表單的一部分。

相關文章