Kotak centang dan tombol radio adalah komponen UI yang banyak digunakan yang digunakan untuk membuat formulir web. Tombol radio paling baik digunakan saat kita memiliki daftar dua atau lebih dari dua opsi, dan pengguna harus memilih satu opsi dengan tepat
Dalam tutorial sebelumnya, kita menjelajahi cara bekerja dengan Checkbox dan Select Dropdown menggunakan PHP
Buat Tombol Radio dengan HTML
Buat formulir sederhana dengan tombol radio dan tambahkan beberapa nama seri populer Netflix sebagai nilai tombol radio
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Radio Buttons in PHP</title> </head> <body> <div class="container mt-5"> <form action="" method="post" class="mb-3"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things </label> <label> <input type="radio" name="radio" value="Ozark">Ozark </label> <input type="submit" name="submit" vlaue="Get Values"> </form> </div> </body> </html>Dapatkan Nilai Terpilih dari Tombol Radio di PHP
Gunakan $_POST[] untuk mendapatkan nilai dari tombol radio yang dipilih. Jika nilainya tidak dipilih, kami menampilkan pesan kepada pengguna untuk memilih nilai dari grup tombol radio
Sesuaikan Tombol Radio dengan CSS
Kode di bawah ini membuat tata letak untuk menyesuaikan tombol radio dengan HTML
<form action="" method="post"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Ozark">Ozark <span class="select"></span> </label> <input type="submit" name="submit" vlaue="Get Values"> </form>Gaya default browser menghasilkan gaya default tombol radio, sekarang mengikuti CSS menggantikan gaya default browser dan akan memberikan tampilan baru pada tombol radio Anda
.container { max-width: 300px; margin: 50px auto; text-align: left; font-family: sans-serif; } select { width: 100%; min-height: 150px; margin-bottom: 20px; } input[type="submit"] { display: block; margin: 20px auto; } label { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 46px; margin-bottom: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label input { position: absolute; opacity: 0; cursor: pointer; } .select { top: 0; left: 0; height: 25px; width: 25px; position: absolute; border-radius: 50%; background-color: #cccccc; } label:hover input~.select { background-color: #ccc; } label input:checked~.select { background-color: #1A33FF; } .select:after { content: ""; position: absolute; display: none; } label input:checked~.select:after { display: block; } label .select:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }Ada cara lain untuk menambahkan gaya khusus di tombol Radio, tetapi kami tidak menggunakan bantuan jQuery dan membuat tombol radio khusus hanya menggunakan CSS
Ini adalah kode terakhir untuk tombol radio di PHP dengan contoh
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Radio Buttons in PHP</title> <style> .container { max-width: 300px; margin: 50px auto; text-align: left; font-family: sans-serif; } select { width: 100%; min-height: 150px; margin-bottom: 20px; } input[type="submit"] { display: block; margin: 20px auto; } label { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 46px; margin-bottom: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label input { position: absolute; opacity: 0; cursor: pointer; } .select { top: 0; left: 0; height: 25px; width: 25px; position: absolute; border-radius: 50%; background-color: #cccccc; } label:hover input~.select { background-color: #ccc; } label input:checked~.select { background-color: #1A33FF; } .select:after { content: ""; position: absolute; display: none; } label input:checked~.select:after { display: block; } label .select:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } </style> </head> <body> <div class="container mt-5"> <form action="" method="post" class="mb-3"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Ozark">Ozark <span class="select"></span> </label> <input type="submit" name="submit" vlaue="Get Values"> </form> <?php if(isset($_POST['submit'])){ if(!empty($_POST['radio'])) { echo ' ' . $_POST['radio']; } else { echo 'Please select the value.'; } } ?> </div> </body> </html>_Kesimpulan
Akhirnya Radio Buttons di tutorial PHP selesai. Dalam tutorial ini, kita belajar cara mengambil nilai tombol radio yang dipilih dan cara menambahkan gaya kustom di tombol radio hanya dengan menggunakan CSS
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