Rumah > Artikel > hujung hadapan web > Kotak semak HTML Tag
Kotak semak HTML Tag
- PHPzasal
- 2024-09-04 16:30:43407semak imbas
Kotak pilihan ialah sejenis elemen input yang tersedia dalam HTML yang membolehkan pengguna menyemaknya atau membiarkannya tanpa tanda dan membenarkan pengguna memilih atau menyahpilih pilihan yang dipaparkan pada halaman web. Kotak semak membolehkan aplikasi memaparkan input untuk pemilihan dalam bentuk kotak dan menyediakan akses pengguna untuk memilih atau menyahpilih pilihan yang dipaparkan. Kotak semak HTML boleh digunakan untuk pemilihan pengguna dalam bentuk pernyataan ya/tidak atau jenis pernyataan perjanjian; bergantung pada nilai ini, kefungsian yang berbeza boleh dicapai.
Sintaks:
Sama seperti parameter jenis input lain, kami akan menukar jenis input kepada 'kotak semak' dalam kes kotak pilihan.
<input type = "checkbox">
Sama seperti jenis input lain, kami boleh menambah parameter tambahan dalam sintaks.
Fungsi kotak semak HTML Tag
- Tag kotak semak HTML memberikan nilai sebagai benar atau salah kepada elemen input sebagai parameter 'ditandai.'
- Apabila kami mengklik pada kotak pilihan, ia mengubah suai nilai elemen ini sebagai benar atau palsu, yang boleh digunakan selanjutnya untuk menyemak.
Contoh Tag kotak semak HTML
Diberikan di bawah adalah contoh kotak semak HTML Tag:
Contoh #1 – Buat Kotak Semak Mudah.
Kod:
<!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>
Output:
Di sini, kami telah mengisytiharkan dua elemen input sebagai Kotak Semak 1 dan Kotak Semak 2 pada halaman web. Kami tidak mengambil sebarang tindakan untuk mengklik pada kotak pilihan.
Contoh #2 – Elemen pilihan berbilang.
Kod:
<!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>
Output:
Contoh ini menunjukkan cara kita boleh mencipta berbilang elemen input kotak semak secara serentak. Di sini, kami telah mencipta sejumlah empat elemen kotak pilihan untuk memilih bahasa. Ambil perhatian bahawa kita boleh memilih lebih daripada satu kotak pilihan pada satu masa; ini berbeza dengan input butang radio, di mana hanya satu pilihan boleh dipilih daripada semua pilihan elemen yang dipaparkan.
Contoh #3 – Atribut Disemak.
Seperti yang diperhatikan daripada contoh sehingga itu, kotak pilihan dinyahtandai pada pemuatan halaman web. Jika kami ingin memaparkan kotak pilihan dengan ditandai sebagai lalai, kami boleh menggunakan atribut "ditandai" dengan elemen kotak pilihan.
Kod:
<!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>
Output:
Di sini, daripada empat elemen kotak pilihan, kami telah membuat dua kotak pilihan untuk dimuatkan seperti yang ditandakan secara lalai. Ambil perhatian bahawa dua bahasa pertama dipaparkan sebagai ditandakan secara lalai.
Contoh #4 – Kotak semak dalam Borang HTML.
Cara lain untuk menggunakan kotak pilihan. Ia akan ditambahkan dalam bentuk HTML dan kami akan melihat cara untuk mengenal pasti sama ada kotak pilihan ditandakan.
Kod:
<!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>
Output:
Di sini, kami telah memasukkan elemen kotak pilihan dalam elemen borang. Ini berguna untuk memproses nilai kotak semak pada pelayan. Penyerahan akan memasukkan nilai kotak semak semasa menghantar borang ke pelayan. Nilai URL dijana dengan menggabungkan nama kotak pilihan dan atribut nilai dalam elemen kotak pilihan.
Sebagai contoh, dalam kes kami, apabila kedua-dua kotak pilihan dihantar sebagai ditandai, URL akan mengandungi “kotak semak1=Ya&kotak semak2=Ya” di dalamnya.
Kesimpulan
Elemen input yang dipanggil kotak semak membolehkan pengguna memilih atau menyahpilih pilihan yang dibentangkan kepada mereka dalam HTML. Dalam artikel ini, kami telah melihat beberapa kes penggunaan yang sama.
Atas ialah kandungan terperinci Kotak semak HTML Tag. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!