HTML 複選框標籤

PHPz原創: 2024-09-04 16:30:43407瀏覽

複選框是 HTML 中提供的輸入元素，允許使用者選取或不選取它，並允許使用者選擇或取消選擇網頁上顯示的選項。複選框使應用程式能夠以框的形式顯示供選擇的輸入，並為使用者提供選擇或取消選擇所顯示選項的存取權限。 HTML複選框可以以是/否聲明或同意類型聲明的形式供使用者選擇；根據這個值，可以實現不同的功能。

文法：

就像其他輸入類型參數一樣，如果是複選框，我們會將輸入類型變更為「複選框」。

<input type = "checkbox">

就像其他類型的輸入一樣，我們可以在語法中加入額外的參數。

HTML 複選框標籤的功能

HTML 複選框標籤將 true 或 false 值指派給輸入元素作為參數「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>

輸出:

HTML 複選框標籤

在這裡，我們在網頁上聲明了兩個輸入元素作為複選框 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>

輸出：

HTML 複選框標籤

這個範例展示了我們如何同時建立多個複選框輸入元素。在這裡，我們總共創建了四個複選框元素來選擇語言。請注意，我們可以一次選擇多個複選框；這與單選按鈕輸入形成對比，單選按鈕輸入只能從所有顯示的元素選項中選擇一個選項。

範例 #3 – 檢查屬性。

從範例中觀察到，該複選框在網頁載入時未選取。如果我們想要顯示預設為選取的複選框，我們可以在 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>

輸出：

HTML 複選框標籤

在這裡，在四個複選框元素中，我們製作了兩個複選框來預設載入為選取狀態。請注意，前兩種語言預設顯示為選取狀態。

範例 #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>

輸出：

HTML 複選框標籤

在這裡，我們在表單元素中包含了複選框元素。這對於處理伺服器上複選框的值很有用。將表單傳送到伺服器時，提交內容將包含複選框值。 URL 值是透過組合複選框名稱和複選框元素中的 value 屬性來產生的。

例如，在我們的例子中，當兩個複選框均以選取狀態發送時，URL 中將包含「checkbox1=Yes&checkbox2=Yes」。

結論

稱為複選框的輸入元素允許使用者選擇或取消選擇 HTML 中呈現給他們的選項。在本文中，我們看到了相同的多個用例。

以上是HTML 複選框標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html if for select checkbox include using Attribute function default this display input kind Access

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML 框架集標籤下一篇：HTML 框架集標籤

看更多