Cara menggunakan atribut "wajib" dengan bidang input "radio"

409

Saya hanya ingin tahu bagaimana cara menggunakan atribut input HTML5 baru "wajib" dengan cara yang benar pada tombol radio. Apakah setiap bidang tombol radio memerlukan atribut seperti di bawah ini atau apakah itu memadai jika hanya satu bidang yang mendapatkannya? 

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html radio-button required kutu buku
sumber

Jawaban:

692

TL; DR: Tetapkan requiredatribut untuk setidaknya satu input dari grup radio.

Pengaturan requireduntuk semua input lebih jelas, tetapi tidak perlu (kecuali menghasilkan tombol radio secara dinamis).

Untuk mengelompokkan tombol radio, mereka semua harus memiliki nilai yang sama name. Ini hanya memungkinkan satu untuk dipilih sekaligus dan berlaku requireduntuk seluruh grup.

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>
Luaskan cuplikan

Perhatikan juga:

Untuk menghindari kebingungan apakah suatu kelompok tombol radio diperlukan atau tidak, penulis didorong untuk menentukan atribut pada semua tombol radio dalam suatu kelompok. Memang, secara umum, penulis didorong untuk menghindari memiliki kelompok tombol radio yang tidak memiliki kontrol yang diperiksa pada awalnya, karena ini adalah keadaan yang tidak dapat dikembalikan oleh pengguna, dan karenanya umumnya dianggap sebagai antarmuka pengguna yang buruk.

Sumber

Seybsen
sumber
1
@kumar_harsh: Semua kotak centang yang ditandai sebagai wajib harus dicentang. Demikian juga, menandai kotak centang yang diperlukan tidak berpengaruh pada kotak centang lain (nama yang sama atau tidak). Tidak ada markup sederhana untuk menunjukkan indikasi "dari kotak centang x ini dengan nama yang sama", setidaknya satu harus diperiksa.
Brad Kent
3
@Drive, ya, Anda dapat menentukannya di semua tombol radio, jika Anda mau. Bahkan w3c menulis: Untuk menghindari kebingungan mengenai apakah kelompok tombol radio diperlukan atau tidak, penulis didorong untuk menentukan atribut pada semua tombol radio dalam suatu kelompok. (lihat w3.org/TR/html5/forms.html#the-required-attribute di bawah Contoh Kode )
Seybsen
1
Sry tetapi yang berikut ini adalah sekelompok omong kosong: Memang, secara umum, penulis didorong untuk menghindari kelompok tombol radio yang tidak memiliki kontrol awal yang diperiksa di tempat pertama, karena ini adalah keadaan yang pengguna tidak dapat kembali ke, dan Oleh karena itu umumnya dianggap sebagai antarmuka pengguna yang buruk. Mengapa? Karena tidak memiliki kontrol yang awalnya diperiksa adalah kasus yang benar-benar valid (UX).
PussInBoots
2
Saya juga ingin menambahkan bahwa, dalam beberapa kasus, tombol radio yang tidak memiliki status "dicentang" adalah hal yang sangat baik, dan UX yang bagus. Dalam kasus saya, pengguna pada awalnya harus mengklasifikasikan beberapa objek berdasarkan daftar jawaban ya / tidak semi-panjang. Salah menjawab pertanyaan-pertanyaan ini akan berdampak buruk pada logika hilir. Oleh karena itu saya tidak dapat menentukan jawaban untuk Ya atau Tidak karena akan bervariasi untuk setiap objek yang dikelompokkan pengguna. Mungkin mereka akan melewatkan satu yang perlu diubah dan memasukkan data buruk ke dalam DB. Atau tugas menjadi terganggu dan tidak yakin di mana mereka tinggalkan.
Joel Wigton
1
@Seybsen Nah, "secara umum" tidak mencakup bahwa ini bukan mutlak. Tetapi badan standar ini tidak pernah memberikan contoh kapan sebenarnya itu akan menjadi antarmuka pengguna yang buruk untuk menggunakan rekomendasi mereka, jadi saya ingin memberikannya. Mereka membuatnya terdengar seperti jika Anda menggunakannya, Anda belum memikirkan UX Anda. Saya ingin pengembang lain memiliki kepercayaan diri untuk membuat pilihan desain yang tepat - tidak hanya membabi buta semua tombol radio.
Joel Wigton
4

Anda dapat menggunakan potongan kode ini ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Tentukan kata kunci " wajib " di salah satu pernyataan pilih . Jika Anda ingin mengubah cara penampilannya yang standar. Anda dapat mengikuti langkah-langkah ini. Ini hanya untuk info tambahan jika Anda memiliki niat untuk mengubah perilaku default.

Tambahkan berikut ini ke .cssfile Anda .

/* style all elements with a required attribute */
:required {
  background: red;
}

Untuk informasi lebih lanjut, Anda dapat merujuk URL berikut.

https://css-tricks.com/almanac/selectors/r/required/

Dulith De Costa
sumber
3

Jika tombol radio Anda telah disesuaikan, misalnya ikon asli untuk tombol radio telah disembunyikan melalui css display:nonesehingga Anda dapat membuat tombol radio Anda sendiri maka Anda mungkin akan mendapatkan kesalahan.

Cara untuk memperbaikinya adalah untuk menggantikan display:nonedenganopacity:0

James
sumber
Saya kira maksud Anda bahwa kesalahan browser tidak terlihat jika tombol radio disembunyikan melalui display:none. Thats sudah menjawab di sini: stackoverflow.com/questions/49687229/…
Seybsen
1

Berikut ini adalah implementasi radiobuttons yang sangat mendasar namun modern dengan validasi HTML5 asli:

body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}
<form>

  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>
Luaskan cuplikan

Meskipun saya penggemar berat pendekatan minimalis menggunakan validasi HTML5 asli, Anda mungkin ingin menggantinya dengan validasi Javascript dalam jangka panjang. Validasi Javascript memberi Anda jauh lebih banyak kontrol atas proses validasi dan memungkinkan Anda untuk mengatur kelas nyata (bukan kelas pseudo) untuk meningkatkan gaya bidang (dalam) yang valid. Validasi HTML5 asli ini dapat menjadi back-back Anda jika Javascript rusak (atau kurang). Anda dapat menemukan contohnya di sini , bersama dengan beberapa saran lain tentang cara membuat formulir yang lebih baik , terinspirasi oleh Andrew Cole .

JoostS
sumber
0

Saya harus menggunakan required="required"nama dan tipe yang sama daripada validasi bekerja dengan baik.

input type="radio" name="userradio"  id="" value="User" required="required"

input type="radio" name="userradio" id="" value="Admin" 

input type="radio" name="userradio" id="" value="Guest"
mk
sumber
1
Akan membantu jika Anda memformat jawaban Anda dan memberikan penjelasan mengapa itu berhasil.
Joe Lissner
1
setuju dengan @JoeLissner. Harap format kode Anda dengan menggunakan alat yang disediakan.
sao