Jika ada tombol radio php

Question

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

Table of Contents Show

Buat Tombol Radio dengan HTML
Dapatkan Nilai Terpilih dari Tombol Radio di PHP
Sesuaikan Tombol Radio dengan CSS
Posting yang Direkomendasikan
Bagaimana cara memeriksa apakah tombol radio dipilih di php?
Bagaimana cara meneruskan nilai tombol radio ke halaman lain di php?
Bagaimana cara menghubungkan tombol radio ke database di php?
Bagaimana cara membuat tombol radio dicentang secara default di php?

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

<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>
<?php
    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 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 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 memeriksa apakah tombol radio dipilih di php?

if(isset($_POST['kirim']) memeriksa apakah ada input yang memiliki nilai kirim dalam hal ini adalah tombol kirim yang memilikinya. Jadi sisi php tidak akan dijalankan jika tombol submit tidak diklik. Bersarang if(isset($_POST['radio'])) memeriksa apakah ada tombol radio yang dicentang.

Bagaimana cara meneruskan nilai tombol radio ke halaman lain di php?

perilaku apa yang Anda harapkan? . $_POST['check'] akan ada jika setidaknya salah satu opsi dipilih. perhatikan juga apostrof. $_POST['periksa'] dan bukan $_POST[periksa].

"> – Nimit Dudani..

Bagaimana cara menghubungkan tombol radio ke database di php?

Setelah membuat database dan tabel, kita akan membuat tabel. Tabel ini memiliki dua bidang i. e. nama dan jenis kelamin (pria dan wanita). Dengan menggunakan tabel ini kita akan memasukkan data ke dalam database MySQL. Ketika Anda mengklik tombol kirim maka nilai bidang nama dan jenis kelamin akan ada di database MySQL

Bagaimana cara membuat tombol radio dicentang secara default di php?

-Jika Anda ingin memilih tombol radio secara default, biasanya yang pertama, Anda tambahkan checked="checked" ke tombol radio pertama. The text you place after the input tag is the text that is shown in the radio button options.

kode php