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" />
Jawaban:
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>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.
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.
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
display:none. Thats sudah menjawab di sini: stackoverflow.com/questions/49687229/…
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>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 .
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"