Kotak centang juga dikenal sebagai kotak centang atau kotak pilihan. Kotak centang adalah komponen antarmuka pengguna kecil yang memungkinkan pengguna memilih lebih dari satu opsi dari daftar opsi yang diberikan
Kami akan membuat daftar buah kecil menggunakan HTML 5 dan menampilkan daftar kotak centang itu kepada pengguna untuk memilih lebih dari satu opsi. Kami akan mendapatkan beberapa nilai dari kotak centang yang dipilih dengan PHP 8 dan belajar menerapkan validasi beberapa kotak centang di PHP
Jika Anda memulai dengan PHP, lihat artikel terperinci kami di Membangun CRUD REST API di PHP dan MySQL dan Mendapatkan Nilai Opsi Pilihan Ganda di PHP
Buat Formulir dengan Beberapa Kotak Centang
Buat formulir menggunakan elemen formulir HTML, tentukan bidang input dengan nilai type="checkbox". checkArr[]_ adalah objek array yang didefinisikan dalam nama-nilai, yang digunakan untuk berkomunikasi dengan PHP
<form action="" method="post"> <label> Apple <input type="checkbox" name="checkArr[]" value="Apple"> </label> <label> Banana <input type="checkbox" name="checkArr[]" value="Banana"> </label> <label> Coconut <input type="checkbox" name="checkArr[]" value="Coconut"> </label> <label> Blueberry <input type="checkbox" name="checkArr[]" value="Blueberry"> </label> <input type="submit" name="submit" value="Choose options" /> </form>Baca Beberapa Nilai dari Kotak Centang yang Dipilih
Metode isset($_POST['submit']) memeriksa apakah nilai kirim dinyatakan atau tidak
Dalam fungsi isset, kami menggunakan validasi lain dan memastikan apakah nilai kotak centang disetel atau tidak menggunakan fungsi empty()
Gunakan loop foreach()_ untuk mengulangi setiap nilai kotak centang yang dipilih dan mencetak di layar pengguna
<?php if(isset($_POST['submit'])){ if(!empty($_POST['checkArr'])){ foreach($_POST['checkArr'] as $checked){ echo $checked."</br>"; } } } ?>_Kotak centang Validasi dalam PHP
Untuk menambahkan validasi di kotak centang, tempatkan kode berikut di template PHP Anda
Kotak centang dengan Gaya Kustom
Tambahkan tag span di bawah kolom input untuk menambahkan gaya khusus di kotak centang
<form action="" method="post"> <label> Apple <input type="checkbox" name="checkArr[]" value="Apple"> <span></span> </label> <label> Banana <input type="checkbox" name="checkArr[]" value="Banana"> <span></span> </label> <label> Coconut <input type="checkbox" name="checkArr[]" value="Coconut"> <span></span> </label> <label> Blueberry <input type="checkbox" name="checkArr[]" value="Blueberry"> <span></span> </label> <input type="submit" name="submit" value="Choose options" /> </form>Kotak centang gaya hanya dengan HTML dan CSS
label { display: block; position: relative; padding-left: 35px; margin-bottom: 20px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 25px; } /* Hide the browser's default checkbox */ label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ span { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #cccccc; } label:hover input~span { background-color: #cccccc; } label input:checked~span { background-color: #1A33FF; } span:after { content: ""; position: absolute; display: none; } label input:checked~span:after { display: block; } label span:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }_Contoh Kode Kotak Centang Final PHP 8
Berikut adalah contoh kode lengkap untuk kotak centang di PHP
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>PHP - Get Multiple Checkbox Value DEMO</title> </head> <body> <div class="container mt-5"> <form action="" method="post" class="mb-3"> <label> Apple <input type="checkbox" name="checkArr[]" value="Apple"> <span></span> </label> <label> Banana <input type="checkbox" name="checkArr[]" value="Banana"> <span></span> </label> <label> Coconut <input type="checkbox" name="checkArr[]" value="Coconut"> <span></span> </label> <label> Blueberry <input type="checkbox" name="checkArr[]" value="Blueberry"> <span></span> </label> <input type="submit" name="submit" value="Choose options" /> </form> <?php if(isset($_POST['submit'])){ if(!empty($_POST['checkArr'])){ foreach($_POST['checkArr'] as $checked){ echo $checked . '<br>'; } } else { echo '<div class="error">Checkbox is not selected!</div>'; } } ?> </div> </body> </html>Kesimpulan
Dalam tutorial ini kita belajar cara bekerja dengan kotak centang. Kami telah melihat cara mendapatkan banyak nilai dan menerapkan validasi dalam PHP
Digamber
Saya Digamber, full-stack developer dan pecinta kebugaran. Saya membuat situs ini untuk memberikan pengalaman coding saya dengan programmer pemula. Saya suka menulis di JavaScript, ECMAScript, React, Angular, Vue, Laravel
Twitter GitHubPosting yang Direkomendasikan
Build PHP MySQL 5 Star Rating System menggunakan jQuery AJAXPHP 8 AJAX Live Data Search dengan MySQL TutorialPHP 8 Select2 Multi Select dengan jQuery AJAX TutorialPHP 8 JSON Data Encode and Decode ContohPHP 8 Server Side Form Validasi Tutorial ContohMengintegrasikan Google reCAPTCHA di PHP 8 Formulir KontakCara Membuat Captcha . Get Selected Value and Add StyleCara Mendapatkan Selected Values dari Select Option di PHP 8Membuat Pagination di PHP 8 dengan MySQL dan BootstrapBuild Formulir Pendaftaran Pengguna (Signup) PHP 8 dengan MySQL