Radio HTML: Grup name, checked, dan required

HTML <input type="radio"> membuat tombol radio untuk memilih satu item dari opsi terkait. Tombol dengan name yang sama dalam form yang sama termasuk ke dalam grup; berikan nilai yang berbeda untuk setiap opsi. Hanya name dan value dari tombol yang dipilih yang dikirim.

Bedakan nama grup dari id setiap tombol

Tombol dalam satu grup berbagi nama, tetapi setiap id yang digunakan untuk mengasosiasikan label harus unik. Memilih tombol lain dengan nama yang sama akan menghapus pilihan sebelumnya. Gunakan nama berbeda untuk pertanyaan yang independen. fieldset dan legend menyediakan grup dan pertanyaannya, tetapi fieldset yang terpisah saja tidak membagi tombol radio dengan nama yang sama menjadi grup pilihan yang berbeda.

Kepemilikan form juga memengaruhi pengelompokan: tombol dengan nama yang sama di form yang berbeda tidak selalu membentuk satu grup. Contoh di bawah memisahkan grup buah dan olahraga dalam satu form yang sama.

Contoh lengkap: periksa nilai untuk dua pertanyaan

Simpan dokumen berikut sebagai radio-demo.html dan buka di browser. Pilihan buah diperlukan, sementara baseball adalah olahraga default. Contoh ini mencegah pengiriman dan menampilkan nilai saat ini di halaman, sehingga tidak diperlukan penangan server.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grup radio dan nilai yang dikirim</title>
</head>
<body>
  <h1>Latihan pilihan</h1>
  <form id="choices">
    <fieldset>
      <legend>Buah (wajib)</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">Apel</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">Pisang</label>
    </fieldset>
    <fieldset>
      <legend>Olahraga</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">Sepak bola</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">Bisbol</label>
    </fieldset>
    <button type="submit">Tampilkan nilai</button>
    <button type="reset">Atur ulang</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Awalnya tidak ada buah yang dipilih dan baseball dipilih. Tekan tombol submit: pilihan buah yang diperlukan mencegah pengiriman.
2. Pilih Apel lalu kirim. Hasil berisi fruit=apple dan sport=baseball. Data memakai baseball dari value, bukan label Bisbol yang ditampilkan.
3. Pilih Pisang untuk menghapus Apel. Pilih Sepak bola untuk menghapus Bisbol; pilihan buah tetap tidak berubah.
4. Atur ulang mengembalikan tidak ada pilihan buah dan pilihan default Bisbol. Atur ulang mengembalikan status centang asli daripada menghapus setiap pilihan.

checked · required

checked adalah atribut Boolean untuk pilihan awal. checked="false" tetap memiliki atribut ini dan bukan cara yang benar untuk menyatakan false. Hilangkan untuk opsi yang awalnya tidak dipilih. Baca atau ubah status saat ini dengan properti checked JavaScript.

Jika ada tombol dalam satu grup yang wajib, satu tombol dalam grup itu harus dipilih. Tombol yang dipilih sendiri tidak harus membawa required. Kedua opsi buah memilikinya di sini untuk memperjelas persyaratan.

Grup tanpa pilihan tidak disertakan dalam data kiriman. Opsi terpilih tanpa value mengirim string bawaan on, jadi berikan nilai pembeda untuk setiap opsi. Tombol disabled tidak dapat digunakan dan tidak disertakan saat pengiriman. Walaupun ada validasi peramban, periksa kembali nilai yang diizinkan pada server.

Menghapus pilihan dan menggunakan keyboard

Mengklik tombol radio yang sudah dipilih tidak akan menghapusnya seperti kotak centang. Jika pengguna perlu memilih “Tidak Ada,” desain sebagai opsi terpisah. Gunakan kotak centang untuk pertanyaan di mana beberapa item dapat diubah secara independen.

Asosiasikan label sehingga mengklik teksnya memilih opsi. Pertahankan perilaku keyboard asli: gunakan Tab untuk mencapai grup, kemudian tombol panah untuk bergerak dan memilih. Perilaku fokus yang tepat dapat berbeda antara browser. Referensi input radio MDN menjelaskan atribut dan aturan pengiriman.