複選框是 HTML 中提供的輸入元素，允許使用者選取或不選取它，並允許使用者選擇或取消選擇網(wǎng)頁上顯示的選項。複選框使應用程式能夠以框的形式顯示供選擇的輸入，並為使用者提供選擇或取消選擇所顯示選項的存取權限。 HTML複選框可以以是/否聲明或同意類型聲明的形式供使用者選擇；根據(jù)這個值，可以實現(xiàn)不同的功能。
文法：
就像其他輸入類型參數(shù)一樣，如果是複選框，我們會將輸入類型變更為「複選框」。
<input type = "checkbox">
就像其他類型的輸入一樣，我們可以在語法中加入額外的參數(shù)。
HTML 複選框標籤的功能
- HTML 複選框標籤將 true 或 false 值指派給輸入元素作為參數(shù)「checked」。
- 當我們點擊複選框時，它會將該元素的值修改為 true 或 false，以便進一步檢查。
HTML 複選框標籤範例
下面給出的是 HTML 複選框標籤的範例：
範例 #1 – 建立一個簡單的複選框。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare input box with type as checkbox, we have also assigned name to this element-->
Checkbox 1 <input type = "checkbox" name = "checkbox1" >
</br>
Checkbox 2 <input type = "checkbox" name = "checkbox2" >
<p id = "result"> </p>
</div>
</body>
</html>
輸出:
在這裡，我們在網(wǎng)頁上聲明了兩個輸入元素作為複選框 1 和複選框 2。我們尚未對點擊複選框採取任何操作。
範例 #2 – 多個選擇元素。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> Choose languages </h4>
<div>
<input type = "checkbox" name = "English">
<label for = "English"> English </label>
</div>
<div>
<input type = "checkbox" name = "Hindi" >
<label for = "Hindi" > Hindi </label>
</div>
<div>
<input type = "checkbox" name = "German" >
<label for = "German" > German </label>
</div>
<div>
<input type = "checkbox" name = "French" >
<label for = "French" > French </label>
</div>
<p id = "result"> </p>
</div>
</body>
</html>
輸出：
這個範例展示了我們?nèi)绾瓮瑫r建立多個複選框輸入元素。在這裡，我們總共創(chuàng)建了四個複選框元素來選擇語言。請注意，我們可以一次選擇多個複選框；這與單選按鈕輸入形成對比，單選按鈕輸入只能從所有顯示的元素選項中選擇一個選項。
範例 #3 – 檢查屬性。
從範例中觀察到，該複選框在網(wǎng)頁載入時未選取。如果我們想要顯示預設為選取的複選框，我們可以在 checkbox 元素中使用「checked」屬性。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> Choose languages </h4>
<div>
<input type = "checkbox" name = "English" checked>
<label for = "English"> English </label>
</div>
<div>
<input type = "checkbox" name = "Hindi" checked>
<label for = "Hindi" > Hindi </label>
</div>
<div>
<input type = "checkbox" name = "German" >
<label for = "German" > German </label>
</div>
<div>
<input type = "checkbox" name = "French" >
<label for = "French" > French </label>
</div>
<p id = "result"> </p>
</div>
</body>
</html>
輸出：
在這裡，在四個複選框元素中，我們製作了兩個複選框來預設載入為選取狀態(tài)。請注意，前兩種語言預設顯示為選取狀態(tài)。
範例 #4 – HTML 表單中的核取方塊。
使用複選框的另一種方式。它將以 HTML 形式添加，我們將了解如何識別複選框是否已被選中。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<form>
<div>
Checkbox 1 <input type = "checkbox" name = "checkbox1" id = "selected" value = "Yes" >
</div>
<br>
<div>
Checkbox 2 <input type = "checkbox" name = "checkbox2" id = "selected" value = "Yes" >
</div>
</br>
<div>
<button type = "submit" > Submit </button>
</div>
</form>
<p id = "result"> </p>
</div>
</body>
</html>
輸出：
在這裡，我們在表單元素中包含了複選框元素。這對於處理伺服器上複選框的值很有用。將表單傳送到伺服器時，提交內(nèi)容將包含複選框值。 URL 值是透過組合複選框名稱和複選框元素中的 value 屬性來產(chǎn)生的。
例如，在我們的例子中，當兩個複選框均以選取狀態(tài)發(fā)送時，URL 中將包含「checkbox1=Yes&checkbox2=Yes」。
結論
稱為複選框的輸入元素允許使用者選擇或取消選擇 HTML 中呈現(xiàn)給他們的選項。在本文中，我們看到了相同的多個用例。
以上是HTML 複選框標籤的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
構建網(wǎng)頁的HTML元素是什麼？
Jul 03, 2025 am 02:34 AM
網(wǎng)頁結構需核心HTML元素支撐，1.頁面整體結構由、、構成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴標題（-）、段落（）及區(qū)塊標籤（如、）以提升條理與SEO；3.導航通過與實現(xiàn)，常用組織鏈接並輔以aria-current屬性增強可訪問性；4.表單交互涉及、、與，確保用戶輸入與提交功能完整。正確使用這些元素能提升頁面清晰度、維護性及搜索引擎優(yōu)化。
為現(xiàn)代頁面宣布正確的HTML5 Doctype。
Jul 03, 2025 am 02:35 AM
Doctype是告訴瀏覽器用哪種HTML標準解析頁面的聲明，現(xiàn)代網(wǎng)頁只需在HTML文件最開頭寫。其作用是確保瀏覽器以標準模式而非怪異模式渲染頁面，且必須位於第一行，前面不能有空格或註釋；正確寫法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應放在部分。
將CSS和JavaScript與HTML5結構有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript應通過語義化標籤、合理加載順序與解耦設計高效結合。 1.使用HTML5語義化標籤如、提升結構清晰度與可維護性，利於SEO和無障礙訪問；2.CSS應置於中，使用外部文件並按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強依賴，通過data-*屬性驅(qū)動行為、類名控制狀態(tài)，統(tǒng)一命名規(guī)範提升協(xié)作效率。這些方法能有效優(yōu)化頁面性能與團隊協(xié)作。
如何使用HTML將選項分組？
Jul 04, 2025 am 03:16 AM
在HTML中使用標籤可以對下拉菜單中的選項進行分組。具體方法是用包裹一組元素，並通過label屬性定義組名，如：1.包含蘋果、香蕉、橙子等選項；2.包含胡蘿蔔、西蘭花等選項；3.每個為一個獨立分組，組內(nèi)選項自動縮進。注意事項包括：①不支持嵌套；②可通過disabled屬性禁用整個組；③樣式受限需結合CSS或第三方庫美化；可使用Select2等插件增強功能。
使用HTML按鈕元素實現(xiàn)可點擊按鈕
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素實現(xiàn)可點擊按鈕，首先需掌握其基本用法與常見註意事項。 1.使用標籤創(chuàng)建按鈕，並通過type屬性定義行為（如button、submit、reset），默認為submit；2.通過JavaScript添加交互功能，可內(nèi)聯(lián)寫法或通過ID綁定事件監(jiān)聽器以提升維護性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強用戶體驗；4.注意常見問題：確保未啟用disabled屬性、正確綁定JS事件、避免佈局遮擋，並藉助開發(fā)者工具排查異常。掌握這
使用新的HTML5方法（FormData）提交表單數(shù)據(jù)
Jul 08, 2025 am 02:28 AM
使用HTML5的FormDataAPI提交表單數(shù)據(jù)更方便，1.它可自動收集帶name屬性的表單字段或手動添加數(shù)據(jù)；2.支持通過fetch或XMLHttpRequest以multipart/form-data格式提交，適合文件上傳；3.處理文件時只需將文件附加到FormData並發(fā)送請求即可；4.注意同名字段會被覆蓋、需處理JSON轉換及無嵌套結構等問題。
在HTML頭部元素中配置文檔元數(shù)據(jù)
Jul 09, 2025 am 02:30 AM
HTMLhead中的元數(shù)據(jù)對SEO、社交分享和瀏覽器行為至關重要。 1.設置頁面標題與描述，使用和並保持簡潔唯一；2.添加OpenGraph與Twitter卡片信息以優(yōu)化社交分享效果，注意圖片尺寸並使用調(diào)試工具測試；3.定義字符集與視口設置確保多語言支持與移動端適配；4.可選標籤如作者版權、robots控制及canonical防止重複內(nèi)容也應合理配置。
如何使用HTML iframe標籤從另一個站點嵌入內(nèi)容？
Jul 04, 2025 am 03:17 AM
使用標籤可以將其他網(wǎng)站內(nèi)容嵌入到自己的網(wǎng)頁中，基本語法為：，可添加width、height和style="border:none;"等屬性控制外觀；為了實現(xiàn)響應式佈局，可通過百分比設置尺寸或使用容器結合padding和絕對定位保持寬高比，同時注意跨域限制、加載性能、SEO影響及安全策略等注意事項；常見用途包括嵌入地圖、第三方表單、社交媒體內(nèi)容及內(nèi)部系統(tǒng)集成。
