Kotak centang hanya dapat memiliki dua status: dicentang dan tidak dicentang. Mereka dapat memiliki nilai apa pun, tetapi ketika mengirimkan formulir, lulus (keadaan dicentang) atau tidak lulus (keadaan tidak dicentang). Status default tidak dicentang. Dalam HTML Anda dapat mengontrol kotak centang seperti ini:
Secara visual, kotak centang dapat memiliki tiga status: dicentang, tidak dicentang, dan tidak ditentukan. Mereka mungkin terlihat seperti ini:
Beberapa catatan tentang kotak centang:
Anda tidak dapat membuat kotak centang tidak terdefinisi dalam HTML. Tidak ada atribut khusus. Meskipun ada properti kotak centang yang dapat diubah di JavaScript:
Var kotak centang = document.getElementById("some-checkbox"); kotak centang.tidak dapat ditentukan = benar;
atau di jQuery:
$("#beberapa-kotak centang").prop("tak tentu", benar); // prop diperkenalkan di jQuery 1.6+
Keadaan tidak terdefinisi hanyalah efek visual. Kotak centang masih dalam keadaan dicentang atau tidak dicentang. Ini berarti bahwa keadaan visual yang tidak terdefinisi menutupi keadaan sebenarnya dari kotak centang.
Sama seperti kotak centang itu sendiri, statusnya yang tidak terdefinisi terlihat berbeda di browser yang berbeda. Berikut ini contoh di Opera 11.50 di Mac:
Dan mengapa hal ini perlu?
Saat mengembangkan proyek, seringkali diperlukan struktur kotak centang. Setiap kotak centang dapat memiliki turunan kotak centang. Jika semua kotak centang turunan dicentang, maka kotak centang induk juga dapat dicentang. Jika tidak ada ahli waris yang ditandai, maka orang tuanya tidak ditandai. Namun jika setidaknya satu ahli waris dicentang, maka kotak centang induk berada dalam keadaan tidak terdefinisi (yang dapat berarti “dicentang sebagian”).
Kode contoh tidak ideal - hanya satu level yang dicentang untuk memperkenalkan keadaan tidak terdefinisi.
Anda juga dapat mengatur peralihan antar negara bagian ketika Anda mengklik tombol mouse pada kotak centang:
Var $cek = $("masukan"), el; $check .data("checked",0) .click(function(e) ( el = $(this); switch(el.data("checked")) ( // Status tidak dicentang, lanjutkan ke kasus tidak terdefinisi 0: el .data("checked",1); el.prop("indeterminate",true); break; // Status tidak terdefinisi, lanjutkan ke kasus yang dicentang 1: el.data("checked",2); el.prop( " indeterminate",false); el.prop("checked",true); break; // Status yang dicentang, masuk ke default yang tidak ditentukan: el.data("checked",0); el.prop("indeterminate",false ) ; el.prop("dicentang",salah); ) ));
Saya melanjutkan rangkaian artikel tentang peningkatan elemen antarmuka. Kali ini giliran kita yang membahas tentang checkbox. Sekarang Anda dapat menerima.
kotak centang
Kotak centang awalnya dibuat sebagai elemen pemilihan grup. Itu. dimaksudkan untuk menunjuk sekelompok elemen untuk tindakan kelompok selanjutnya dengan mereka.
Ada kotak centang yang bagus dan nyata di Gmail
Contoh penggunaan kotak centang adalah antarmuka email modern. Dengan menandai beberapa huruf, Anda dapat, misalnya, menghapus semuanya.
Masalah dan solusi saat menggunakan kotak centang
Mari kita lihat masalah utama yang saya lihat saat menggunakan kotak centang dan apa yang dapat dilakukan untuk mengatasi masalah ini.
Menggunakan kotak centang untuk status biner
Seringkali kotak centang digunakan untuk memilih di antara dua opsi berbeda. Misalnya, saya melihat kotak centang seperti itu di salah satu toko online.
Kotak centang ini tidak menjelaskan apa pun. Tidak jelas apakah pengiriman akan dilakukan melalui pos atau apakah saya harus pergi untuk membeli. Dalam hal ini, akan lebih logis jika menggunakan tombol radio untuk memilih opsi yang diinginkan. Mari kita ulangi.
Sekarang semuanya menjadi lebih jelas
Menggunakan kotak centang untuk mengaktifkan opsi
Cukup sering saya menggunakan kotak centang untuk menunjukkan apakah suatu opsi aktif atau nonaktif. Yang menurut saya sangat tidak tepat.
Kotak centang bukanlah tombol. Ini adalah elemen yang ditujukan untuk operasi kelompok. Mengklik kotak centang tidak akan menghasilkan tindakan apa pun. Indikasi warna ideal untuk mengidentifikasi secara visual opsi yang diaktifkan dan dinonaktifkan dari daftar.
Pada contoh di atas, Anda akan memilih beberapa opsi dan klik tombol Terapkan. Opsi ini layak dilakukan, tetapi tidak terlalu nyaman. Apa yang harus dilakukan? Saya mengusulkan solusi ini:
Mengaktifkan opsi di salah satu proyek klien
Di sini Anda dapat melihat dengan jelas status opsi (diaktifkan atau tidak). Peralihan segera terlihat dan masalah lain telah terpecahkan, yang akan kita bicarakan nanti. Peralihan serupa berasal dari antarmuka iPhone dan merupakan analog yang layak dari kotak centang sederhana.
Ukuran area kecil yang dapat diklik
Berdasarkan Hukum Fitts, semakin kecil suatu unsur maka semakin sulit penggunaannya. Masalah ini dapat diamati tidak hanya di kotak centang. Ini adalah salah satu masalah utama dari banyak pengendalian.
Tanda centang kecil tidak mudah untuk dibidik atau dipukul. Bahkan jika Anda membuat seluruh area beserta teks dapat diklik, pengguna akan terus mengarahkan secara khusus pada tanda centang.
Bagaimana jalan keluar dan tekniknya?
Dengan demikian menunjukkan area yang dapat diklik.
Tombol kotak centang di situs web Ostrovok.ru
Dengan meningkatkan area klik.
Tandai kotak centang pada salah satu proyek klien
3. Ubah kotak centang menjadi tombol radio. Saya menulis tentang ini di atas.
"Pilih semua" dan "hapus semua"
Untuk kenyamanan bekerja dengan sejumlah besar kotak centang, antarmuka harus memiliki opsi "Pilih semua kotak centang" dan "Hapus centang semua kotak centang". Jika tidak, bekerja dengan antarmuka seperti itu akan menjadi sangat membosankan dan memakan waktu. Bayangkan Anda perlu memilih setidaknya 10 item dari 12 item yang tersedia dalam daftar. Ini jauh lebih mudah dilakukan dengan memilih semuanya dan membatalkan pilihan yang tidak perlu.
kesimpulan
Kotak centang awalnya dibuat sebagai alat pemilihan grup. Dan Anda tidak boleh menggunakannya untuk hal lain dalam bentuk aslinya. Namun, dengan beberapa penyesuaian dan mengikuti rekomendasi sederhana, ini dapat diubah menjadi alat yang nyaman bagi pengguna Anda.
Di episode sebelumnya dan berikutnya
- . Mengapa mereka tidak boleh digunakan. Dan jika digunakan, bagaimana caranya?
- . Pilihan sederhana tanpa pilihan.
- . Bagaimana bidang masukan harus bekerja dengan tipe data yang berbeda.
Semua pengembang situs web, aplikasi web, dan program desktop mengetahui apa itu kotak centang. Tetapi orang-orang yang jauh dari pemrograman, ketika dihadapkan dengan kata asing yang tidak dapat dipahami, tidak mengerti apa yang mereka bicarakan. Faktanya, semuanya sangat sederhana. Kotak centang adalah salah satu kontrol paling sederhana saat membuat formulir.
Tanda centang biasa
Semua orang pasti pernah menjumpai simbol-simbol seperti tanda centang dalam kehidupannya, mulai dari sekolah. Saat menguji, Anda perlu menandai opsi yang benar dengan tanda ini. Kemudian saat mengisi berbagai kuesioner. Nah, saat ini, ketika pengguna melakukan banyak tindakan melalui Internet, tidak ada tempat tanpa centang. Bahkan pendaftaran paling sederhana di situs mana pun mengharuskan Anda mencentang beberapa kotak (hobi, keterampilan).
Perdagangan internet kini juga berkembang. Saat membuat pesanan, pengguna menandai item yang dia minati. Dan seringkali, saat menginstal game komputer, Anda diminta untuk memilih software tambahan. Dan di sini juga, Anda perlu membuat pilihan. Jadi, kotak centang adalah tanda centang yang sama yang digunakan pada halaman web.
Dalam pembuatan situs web
Pengembang situs web melihat elemen ini secara lebih luas. Lagi pula, membuat lebih sulit daripada sekadar mengeklik kotak satu kali dan mencentang kotak. Situs web dikembangkan menggunakan bahasa markup hypertext, yang dalam lingkungan profesional disebut hanya empat huruf - HTML. Dan untuk membuat tanda centang di dalamnya, Anda perlu menulis beberapa kode.
Bagaimana kotak centang dibuat? HTML memiliki elemen khusus (tag), yaitu bidang yang dilengkapi dengan jenis kotak centang, yang ditulis sebagai berikut: .
Prinsip pengoperasian
Elemen ini bekerja berdasarkan prinsip paling sederhana: afirmasi atau negasi. Jika suatu field dicentang, browser web mengirimkan variabel yang akan mengirimkan nama field tersebut ke server untuk diproses, tetapi jika kotak tersebut tidak dicentang, server tidak menerima apa pun. Elemen memiliki atribut opsional dengan nilai nilai, tetapi bersifat opsional.
Terkadang beberapa kotak di halaman sudah dicentang. Untuk melakukan ini, pengembang menambahkan atribut khusus ke tag, yang menunjuk ke kotak centang yang sudah dicentang secara default. Ini adalah atribut yang dicentang, yaitu, "dicentang".
Kotak centang adalah elemen yang tidak menyiratkan satu pilihan dari beberapa opsi, tetapi penandaan semua opsi yang sesuai. Bagi pengembang, hal ini penting karena jika satu formulir berisi beberapa kotak centang, namanya harus berbeda satu sama lain.
Kotak centang dependen
Jika Anda hanya perlu memilih satu opsi dari kumpulan, elemen lain digunakan - tombol radio, bukan kotak centang. Namun terkadang tipe seperti kotak centang dependen digunakan. HTML, bersama dengan bahasa pemrograman JavaScript, memungkinkan Anda membuat satu kotak centang utama yang menjadi sandaran kotak centang lainnya. Ketika Anda mengkliknya, beberapa kotak centang dapat dicentang sekaligus. Ini jarang digunakan, karena agak bertentangan dengan aturan kotak centang.
Seperti semua tag dalam HTML, kotak centang merupakan elemen yang memiliki karakteristik tersendiri. Apakah mereka? Atribut untuk memeriksa terlebih dahulu kotak centang telah disebutkan di atas - dicentang. Karena kotak centang harus memiliki nama yang berbeda dalam satu bentuk, maka atribut nama diperlukan. Itu hanya mengidentifikasi setiap kotak centang individu. Untuk mengatur nilai yang akan dikirim ke server, gunakan atribut value.
Perlu dicatat bahwa kotak centang adalah kontrol grafis yang digunakan terutama dalam formulir. Dan mereka bekerja dalam tiga mode: tidak dipilih, dipilih dan tidak ditentukan.
Gunakan dalam tabel
Kotak centang tidak hanya digunakan dalam HTML saat mengembangkan situs web dan aplikasi web. Perangkat lunak seperti 1C juga menggunakan elemen ini. Bagaimanapun, suatu perusahaan memiliki banyak komponen yang berbeda, dan ketika bekerja dengan dokumentasi, semua ini harus diperhatikan. Misalnya, dengan menggunakan kotak centang, Anda dapat menandai daftar stok gudang atau pelanggan yang ingin Anda kirimi barang.
Program apa lagi yang menggunakan elemen ini? Excel - semua orang tahu program spreadsheet dari Microsoft ini, yang sering kali menjadi prinsip cara kerja kotak centang di sini: jika kotak centang dicentang, maka elemen mengembalikan nilai sebenarnya, jika tidak dicentang, ia mengembalikan nilai salah. Untuk memasukkan kotak centang ke dalam dokumen, Anda perlu mengaktifkan tab khusus untuk pengembang. Hal ini dilakukan melalui parameter yang sedikit berbeda di setiap versi Excel.
Bagaimana cara menemukan pengaturan yang saya perlukan? Selalu ada bantuan atau mesin pencari. Setelah tab diaktifkan, Anda dapat menyisipkan elemen melalui perintah “Sisipkan” pada item “Kontrol”. Hal yang perlu diperhatikan di sini adalah menu ini juga berisi kontrol ActiveX yang terletak di bawah elemen form yang diperlukan. Ada juga kotak centang di sana. Apa perbedaan di antara keduanya? Untuk menggunakan kontrol ActiveX, Anda memerlukan bahasa pemrograman VBA bawaan, yang hanya diketahui sedikit orang. Dan kotak centang biasa dapat langsung ditautkan ke sel tertentu di dokumen.
Setelah kotak centang dimasukkan ke dalam Excel, kotak tersebut akan dicentang secara default. Mengklik di mana pun dalam dokumen akan menghilangkan tanda tersebut. Untuk membalikkan pilihan, Anda perlu mengklik kotak centang dengan tombol kanan mouse, karena tombol kiri menghapus atau mencentang kotak.
Dengan mengarahkan kursor ke kotak centang dan menahan tombol kiri, Anda dapat memindahkan elemen ke lokasi mana pun di dokumen. Hal ini juga mudah dilakukan dengan menggunakan tombol pada keyboard. Saat Anda mengarahkan kursor ke sudut suatu elemen, Anda dapat meregangkannya ke ukuran lebih besar atau memperkecilnya. Pengaturan khusus memungkinkan Anda menyesuaikan kotak centang dengan mengubah warna, latar belakang, dan bingkainya.
Kesimpulan
Jadi, seperti yang dapat dilihat di atas, kotak centang bukanlah elemen kompleks dari antarmuka grafis, tetapi sesuatu yang ditemui setiap orang dalam kehidupan sehari-hari - tanda centang biasa. Konsepnya sedikit berbeda untuk programmer dan pengguna biasa, tetapi intinya sama: ini adalah elemen kontrol yang memungkinkan Anda membuat banyak pilihan saat mengisi formulir. Penting untuk tidak mengacaukan kotak centang dengan tombol radio, yang memungkinkan Anda memilih hanya satu item dari banyak item.
Pengembang aplikasi web, situs web, dan program desktop harus mengetahui apa itu kotak centang. Namun pengguna yang jauh dari pemrograman, ketika menjumpai kata asing yang tidak dapat dipahami ini, seringkali tidak memahami maknanya. Faktanya, semuanya cukup sederhana. Kotak centang adalah elemen kontrol paling sederhana saat membuat formulir.
Kotak centang: tanda centang biasa
Pastinya masing-masing dari kita pernah menjumpai simbol seperti tanda centang dalam hidup. Sebutan ini pasti sudah tidak asing lagi bagi kita, mulai dari bangku sekolah. Tanda ini menandai jawaban yang benar selama pengujian. Kotak centang juga digunakan saat mengisi berbagai formulir. Saat ini, ketika pengguna melakukan banyak tindakan melalui Internet, tidak ada jalan keluar tanpa tanda centang. Bahkan prosedur pendaftaran paling sederhana di situs mana pun memerlukan pemeriksaan beberapa poin. Saat ini, perdagangan online lebih berkembang dari sebelumnya. Saat membuat pesanan, pengguna hanya dapat menandai item yang menarik minatnya. Sangat sering, ketika menginstal permainan komputer, pengguna diminta untuk memilih perangkat lunak tambahan. Dalam hal ini, Anda juga perlu menentukan pilihan. Jadi, kotak centang sama persis dengan tanda centang yang digunakan pada halaman web.
Menggunakan kotak centang saat membuat situs web
Pengembang situs web melihat elemen ini secara lebih luas. Lagi pula, membuatnya jauh lebih sulit daripada sekadar mengeklik kotak. Situs web dikembangkan menggunakan bahasa markup hypertext. Dalam lingkungan profesional, bahasa ini disebut HTML. Untuk membuat kotak centang dalam bahasa ini, Anda perlu menulis beberapa kode. Bagaimana sebenarnya kotak centang dibuat? HTML adalah elemen khusus yang berupa bidang dengan tipe kotak centang. Tertulis sebagai berikut:
Kotak centang: prinsip operasi
Elemen ini bekerja berdasarkan prinsip yang cukup sederhana: penolakan atau penegasan. Jika field tersebut dicentang, browser akan mengirimkan variabel yang akan mengirimkan nama field tersebut ke server untuk diproses. Jika kotak centang tidak dicentang, server tidak akan menerima apa pun. Elemen ini memiliki atribut yang memiliki nilai nilai. Atribut ini bersifat opsional. Pengembang menambahkan atribut khusus ke tag yang menunjukkan kotak centang dicentang secara default. Atribut ini disebut dicentang, yang artinya “diperiksa” dalam bahasa Inggris.
Elemen seperti kotak centang tidak menyiratkan satu pilihan dari beberapa opsi, melainkan penandaan semua opsi yang sesuai. Hal ini penting bagi pengembang, karena jika formulir berisi beberapa kotak centang, maka namanya harus berbeda satu sama lain.
Kotak centang dependen
Jika Anda hanya perlu memilih satu opsi dari sekian banyak opsi yang disajikan, Anda dapat menggunakan elemen lain, seperti tombol radio. Dalam beberapa kasus, tipe seperti kotak centang dependen digunakan. Bersama dengan bahasa pemrograman JavaScript, HTML memungkinkan Anda membuat satu kotak centang utama, yang menjadi sandaran semua kotak centang lainnya. Saat Anda mengklik elemen ini, beberapa kotak centang dapat dicentang sekaligus. Ini jarang digunakan karena bertentangan dengan aturan kotak centang. Kotak centang, seperti tag HTML lainnya, memiliki karakteristiknya sendiri. Apa itu? Kita telah membahas atribut untuk menandai kotak centang terlebih dahulu. Karena kotak centang harus memiliki nama berbeda pada formulir yang sama, atribut nama diperlukan. Atribut inilah yang mengidentifikasi setiap kotak centang satu per satu. Untuk mengatur nilai yang akan dikirim ke server, Anda harus menggunakan atribut value. Perlu dicatat bahwa kotak centang adalah kontrol grafis yang digunakan terutama dalam berbagai bentuk. Mereka bekerja dalam tiga mode: dipilih, tidak dipilih, dan tidak ditentukan.
Gunakan dalam tabel
Elemen seperti "kotak centang" tidak hanya dapat digunakan dalam HTML saat mengembangkan aplikasi web dan situs web. Elemen ini juga digunakan dalam perangkat lunak, misalnya dalam program 1C. Ada banyak komponen berbeda dalam suatu perusahaan, dan ketika bekerja dengan dokumentasi, semua ini perlu diperhatikan. Misalnya, dengan menggunakan kotak centang, Anda dapat menandai daftar pelanggan atau daftar stok gudang. Di program lain apa elemen ini dapat digunakan? Semua orang mengetahui program Excel dari Microsoft yang sering digunakan sebagai alternatif pengganti 1C. Di sini, prinsip pengoperasian kotak centang ini adalah sebagai berikut: jika kotak centang dicentang, maka elemen ini mengembalikan nilai sebenarnya. Jika kotak centang tidak dicentang, maka elemen ini mengembalikan nilai salah. Untuk memasukkan kotak centang ke dalam dokumen, Anda harus mengaktifkan tab khusus untuk pengembang. Hal ini dapat dilakukan dengan menggunakan parameter yang berbeda di setiap versi Excel.
Bagaimana cara menemukan pengaturan yang diperlukan? Untuk tujuan ini, Anda selalu dapat menggunakan mesin pencari atau bantuan. Saat tab ini diaktifkan, Anda dapat menyisipkan elemen ini menggunakan perintah “Sisipkan” dari item “Kontrol”. Di sini Anda perlu memperhatikan fakta bahwa menu juga berisi elemen ActiveX, yang terletak di bawah elemen formulir yang diperlukan. Ada juga kotak centang di sini. Apa bedanya Untuk menggunakan kontrol ActiveX, Anda memerlukan bahasa pemrograman VBA bawaan, yang hanya diketahui sedikit orang. Kotak centang biasa dapat ditautkan langsung ke sel tertentu dalam dokumen. Setelah semua kotak centang di Excel dicentang, maka kotak tersebut akan dicentang secara default. Jika Anda mengklik di mana saja dalam dokumen, tanda centang akan dihilangkan. Untuk melakukan seleksi terbalik, Anda perlu mengklik kanan pada bendera. Tombol kiri menghapus centang atau memberi tanda centang.
Bidang input memungkinkan Anda menentukan nilai menggunakan keyboard.
Kapan harus digunakan
Gunakan kolom input untuk teks pendek atau nilai numerik tanpa format yang dapat diprediksi.
Di HTML5, kolom input bisa bermacam-macam jenisnya - warna, tanggal, email, kata sandi, teks, url, dll. Di layanan Contour, gunakan hanya jenis teks dan kata sandi. Jenis lainnya tidak didukung oleh browser utama atau menawarkan antarmuka pengguna yang buruk dan validasi yang desainnya akan berbeda dari milik kami.
Nama
Nama field ditulis dengan huruf kapital.
Rujuk ke kolom input sebagai kata benda yang menunjukkan apa yang ingin Anda masukkan. Hindari kata “milik Anda”, “masuk” dan sejenisnya pada judul - tidak masuk akal.
Jangan beri tanda titik dua setelah judul: tanpa titik dua, semuanya jelas, hanya akan menimbulkan gangguan visual tambahan.
Uraian pekerjaan
Penampung
Jika dari namanya tidak jelas cara mengisi suatu field, gunakan placeholder - petunjuk yang ditampilkan di dalam field sampai terisi.
Placeholder (dari bahasa Inggris placeholder) adalah placeholder. Sinonim “tanda air” sering digunakan, namun placeholder adalah nama yang lebih tepat, karena cocok dengan atribut yang sesuai dari tag input dan textarea.
Saat bidang menerima fokus, placeholder menjadi lebih terang dan menghilang saat karakter pertama dimasukkan.
Placeholder tidak akan meminta Anda memasukkan nilai tertentu ke dalam bidang.
Jika bidang telah dihitung dan Anda telah menghitung nilainya, gunakan bidang otomatis:
Jika Anda mengasumsikan suatu nilai, isi terlebih dahulu bidang tersebut, pengguna akan dapat mengeditnya:
Anda dapat menempatkan nama bidang di placeholder dalam kasus luar biasa: ketika Anda perlu menghemat ruang, atau tujuan bidang tersebut jelas:
Jangan gunakan placeholder untuk menentukan nama bidang di seluruh formulir. Ketika diisi, formulir ini menjadi “buta”:
Membersihkan lapangan
Jika pengguna sering kali perlu mengosongkan bidang dan memasukkan nilai baru, gunakan tombol silang khusus untuk ini.
Tanda silang ditampilkan ketika setidaknya 1 karakter dimasukkan ke dalam kolom. Tanda silang ditampilkan bahkan ketika fokus berada di luar lapangan.
Saat Anda mengklik tanda silang, fokus beralih ke bidang, nilai yang dimasukkan terhapus:
Area yang dapat diklik sama tingginya dengan kolom input dan lebarnya 28 px:
Internet Explorer 10 menggambar salibnya sendiri untuk setiap bidang masukan dengan fokus. Agar tanda silang ini tidak tumpang tindih dengan ikon kita, kita perlu menambahkan gaya:
Ukuran dan lokasi
Bidang masukan, seperti tombol, dapat terdiri dari tiga ukuran. Gunakan kolom masukan berukuran sedang dan besar jika ini adalah kontrol utama pada halaman. Misalnya, kolom pencarian di direktori. Di bidang terbesar, ukuran font adalah 16 px.
Judul kolom harus sejajar dengan garis dasar teks di kolom:
Buat lebar bidang sesuai dengan lebar nilai yang dimasukkan. Ini memberi tahu pengguna nilai apa yang diharapkan darinya dan membantu pengguna memastikan bahwa dia mengisi kolom dengan benar.
