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 PHPtitle>
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
<form action="" method="post">
<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>
if(isset($_POST['submit'])){
if(!empty($_POST['radio'])) {
echo ' ' . $_POST['radio'];
} else {
echo 'Please select the value.';
}
}
?>
_
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 PHPtitle>
<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>
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 GitHub
Posting 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
Bagaimana cara mendapatkan nilai dari tombol radio yang dipilih?
Untuk mendapatkan nilai dari tombol radio yang dipilih, fungsi yang ditentukan pengguna dapat dibuat yang mendapatkan semua tombol radio dengan atribut nama dan menemukan tombol radio yang dipilih menggunakan . Properti yang diperiksa mengembalikan True jika tombol radio dipilih dan False jika sebaliknya. . The checked property returns True if the radio button is selected and False otherwise.
Bagaimana cara mendapatkan nilai dari tombol radio di php?
Bagaimana cara memposting nilai tanpa tombol kirim di php?
Formulir dapat dikirimkan tanpa menggunakan tombol submit dengan mengimplementasikan atribut event tertentu atau dengan mengklik link . Tugas ini dapat dilakukan dengan menggunakan atribut acara OnClick atau dengan menggunakan formulir. kirim () metode dalam Javascript.
Sudah bertahun-tahun sejak saya bahkan melihat PHP apa pun tetapi jika saya ingat dengan benar, Anda dapat memeriksa $_POST["NAME_OF_RADIOBUTTON"]. if the radio button is selected, the value should be present, if it's not selected, the value in $_POST["NAME_OF_RADIOBUTTON"] will be null.
