HTML input checkbox 核取方塊

admin發表於2019-09-21
HTML

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

相關文章