HTML input checkbox核取方塊

admin發表於2018-09-18
HTML

radio單選按鈕只能夠選中其中一項，核取方塊則可以選中任意多項。

所以核取方塊通常用於需要多項選擇的應用場景，比如某些網站需要選擇個人掌握的技能或者愛好等。

將<input>標籤的type屬性值設定為"checkbox"即可建立一個核取方塊。

程式碼例項如下:

[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="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" name="favorite" value="2" />後端
  <input type="checkbox" name="favorite" value="3" />美工
</form>
</body>
</html>

上面的程式碼簡單演示了核取方塊的使用，可以選中任意項。

特別說明：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="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" checked name="favorite" value="2" />後端
  <input type="checkbox" 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="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" required  name="favorite" value="2" />後端
  <input type="checkbox" name="favorite" 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="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" autofocus  name="favorite" value="2" />後端
  <input type="checkbox" name="favorite" 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="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" disabled  name="favorite" value="2" />後端
  <input type="checkbox" name="favorite" value="3" />美工
  <input type="submit" value="提交表單">
</form>
</body>
</html>

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" id="ant" method="post" action="do.php">
  興趣：
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" disabled  name="favorite" value="2" />後端
  <input type="submit" value="提交表單">
</form>
<input type="checkbox" form="ant" name="favorite" value="3" />美工
</body>
</html>

form屬性引用所屬表單的id，於是，雖然單核取方塊在<form>之外，但依然是該表單的一部分。

相關文章