Berbicara mengenai elemen formulir, umumnya elemen radio dan checkbox akan menjadi jenis elemen yang cukup sulit untuk ditangani oleh pihak pengguna alasannya ialah ukurannya yang sangat kecil. Contoh sederhana:
<input type="radio" name="o"> Pilihan 1 <br> <input type="radio" name="o"> Pilihan 2Formulir di atas memang bekerja, tetapi tidak cukup nyaman untuk digunakan. Area yang dapat diklik hanya terfokus pada elemen radio saja yang ukurannya sangat kecil:
Mungkin tidak duduk perkara jikalau orang yang mengisi formulir tersebut ialah orang-orang yang masih muda. Tetapi bagaimana jikalau yang mengisi formulir tersebut ialah para orangtua dan lanjut usia? Karena bagi mereka, mengarahkan mouse saja sudah kewalahan, apalagi mengeklik elemen radio yang ukurannya kecil ibarat itu!
Selalu Ingat untuk Menambahkan Elemen Label
Untuk memperluas area pengecekan, kita dapat membungkus setiap opsi formulir dengan elemen label ibarat ini:
<label><input type="radio" name="o"> Pilihan 1</label> <br> <label><input type="radio" name="o"> Pilihan 2</label>Cara ini memungkinkan teks (atau elemen apa saja) yang berada di dalam elemen label tersebut untuk dapat bekerja sebagai pemicu perubahan kondisi radio yang merupakan anak dari label tersebut:
Kursor
Berikan elemen label dan semua jenis tombol dengan kursor jari telunjuk untuk meningkatkan kenyamanan:
input[type="button"], input[type="submit"], input[type="reset"], button, label {cursor:pointer}Efek Timbal Balik
Perubahan warna dikala opsi disentuh dan dikala opsi terseleksi, semua itu akan menawarkan rasa keyakinan kepada setiap pengguna yang sedang mengisi formulir Anda:
label:hover {background-color:whitesmoke} label:active {background:none} label.selected {background-color:forestgreen} /* Kelas `.selected` akan diciptakan oleh JavaScript */Demonstrasi
Berikut ini ialah sebuah demonstrasi soal pilihan ganda online dengan susukan tanggapan yang gampang untuk kenyamanan pengguna:
HTML
<form class="qa-form" id="qa-form" action="..."> <ol> <li> <p>Uraian pertanyaan di sini ...</p> <label><input type="radio" name="a-1"> Jawaban 1</label> <label><input type="radio" name="a-1"> Jawaban 2</label> <label><input type="radio" name="a-1"> Jawaban 3</label> ... </li> <li> ... </li> </ol> </form>CSS
.qa-form {padding:1em 1em 2em} .qa-form ol, .qa-form li, .qa-form p, .qa-form input, .qa-form label { margin:0; padding:0; } .qa-form ol { list-style:decimal outside; margin:0 0 2em 3em; } .qa-form p { margin:1em 0; clear:both; } .qa-form label { display:block; width:300px; cursor:pointer; overflow:hidden; padding:5px 10px 5px 6px; margin:0 0 2px; line-height:100%; border-radius:20px; } .qa-form label input { outline:none; vertical-align:top; cursor:inherit; } .qa-form button {cursor:pointer} .qa-form label:hover {background-color:whitesmoke} .qa-form label:active {background:none} .qa-form label.selected { background-color:forestgreen; color:white; }jQuery
// Fungsi ini dipakai untuk menambahkan/menyingkirkan // kelas `.selected` pada elemen `<label>` // menurut kondisi radio di dalamnya $(document).ready(function() { $('#qa-form :radio').on("change", function() { $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected'); }); $('#qa-form :reset').on("click", function() { $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false); }); });Kesimpulan
Selalu pastikan bahwa pengguna dapat merasa nyaman dengan apa yang Anda berikan untuk mereka gunakan. Berikan efek timbal balik yang tegas kepada pengguna semoga mereka yakin dengan apa yang telah mereka putuskan, sehingga hal-hal ibarat kegagalan tes alasannya ialah kesalahan antarmuka pengguna tidak akan terjadi.
Sumber https://www.dte.web.id/