資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何建立一個帶有可點選標籤的複選框？
HTML 的<checkbox>標籤用於定義啟用時被勾選（選中）的方框。複選框用於允許使用者從有限數量的選項中選擇一個或多個選項。<input>元素的type屬性（如下語法所示）建立它。
<input type="checkbox" name="field name" value="Initial value">
複選框支援以下屬性
Checked: 一個布林屬性，指示此複選框預設情況下是否被選中（頁面載入時）。它不指示此複選框當前是否被選中：如果複選框的狀態發生變化，此內容屬性不會更新。
Value: value屬性為所有輸入型別共享，但它對複選框輸入具有特定用途：提交表單時，只有當前選中的複選框才提交到伺服器，報告的值是value屬性的值。
建立帶有可點選標籤的HTML複選框意味著當點選標籤時，複選框會開啟或關閉。在本教程中，我們將討論兩種建立帶有可點選標籤的複選框的方法。
包裹Label標籤
在HTML中，<label>標籤用於改進滑鼠可用性；例如，如果使用者點選<label>元素內的文字，它會切換控制元件。<label>標籤指定按鈕、輸入、計量器、輸出、進度條、選擇或文字區域元素的標籤。標籤也可以透過將其包含在<label>元素中來繫結到元素。
它支援以下屬性。
For: for屬性指定標籤繫結到的哪個表單元素。
Form: form屬性指定標籤所屬的表單。
示例
在下面的示例中，我們在label標籤內使用複選框並應用某些CSS樣式屬性。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Checkbox with a Clickable Label?</title>
<style>
.label1 {
background-color:floralwhite;
color:darkolivegreen;
font-weight:550;
font-size:20px;
border:2px solid darkolivegreen;
border-radius:10px;
padding:8px 20px 12px 15px;
display:inline-block;
margin:10px;
text-align:center;
}
</style>
</head>
<body>
<h2>This is a Clickable Checkbox</h2>
<label class="label1">
<input type="checkbox" name="checkbox" value="text">Click Me
</label>
</body>
</html>
使用“for”屬性
for 屬性是<label>和<output>的有效屬性。當用於<label>元素時，它指示此標籤描述的表單元素。當我們點選標籤時，我們將焦點帶到關聯的輸入元素。
for屬性將正在定義的標籤顯式連結到另一個控制元件。當此屬性存在時，它必須與同一文件中另一個控制元件的id屬性具有相同的值。當缺少標籤時，元素的內容與標籤關聯。
要將標籤隱式關聯到另一個控制元件，控制元件元素必須包含在Label元素的內容中。在這種情況下，標籤只能有一個控制元件元素。標籤可以出現在關聯控制元件之前或之後。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Create Checkbox with a Clickable Label?</title>
<style>
.label1,
.label2{
background-color:thistle;
color:purple;
font-weight:550;
font-size:20px;
border:3px solid rebeccapurple;
border-radius:20px;
padding:8px 20px 12px 15px;
display:inline-block;
text-align:center;
}
.container{
height:200px;
width:300px;
background-color:powderblue;
margin:20px;
border-radius:10px;
padding:10px;
}</style>
</head>
<body>
<div class="container">
<h3>This is a clickable checkbox! Try it.</h3>
<input type="checkbox" name="checkbox" id="checkbox_id1" value="text">
<label class="label1" for="checkbox_id">Click Here</label><br><br>
<input type="checkbox" name="checkbox" id="checkbox_id2" value="text">
<label class="label2" for="checkbox_id2">Click Here</label>
</div>
</body>
</html>
結論
如上所示，第一種方法比使用for屬性具有一些優勢。如果標籤包含最多一個輸入但缺少for屬性，則假定它是為其中包含的輸入。
包裹label標籤更高效且更有用。它比for屬性有很多優點。無需為每個複選框分配id。無需在<label>中包含額外的屬性。輸入的可點選區域也是標籤的可點選區域，因此無論輸入>和實際標籤文字相隔多遠，或者您為其應用何種CSS，都只有一個可點選的地方來控制複選框。
933 次瀏覽
