HTML input radio單選按鈕

admin發表於2018-10-24

<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>之外,但依然是該表單的一部分。

相關文章