Kotak Teks

Artikel
06/13/2023

Catatan

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kita saat ini.

Dengan kotak teks, pengguna dapat menampilkan, memasukkan, atau mengedit teks atau nilai numerik.

cuplikan layar kotak teks dan label umum

Kotak teks biasa.

Catatan

Panduan yang terkait dengan tata letak, font, dan balon disajikan dalam artikel terpisah.

Apakah ini kontrol yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

Apakah praktis untuk menghitung semua nilai yang valid secara efisien? Jika demikian, pertimbangkan daftar pilihan tunggal, tampilan daftar, daftar drop-down, daftar drop-down yang dapat diedit, atau penggeser sebagai gantinya.
Apakah data yang valid benar-benar tidak dibatasi? Atau apakah data valid hanya dibatasi berdasarkan format (panjang atau jenis karakter yang dibatasi)? Jika demikian, gunakan kotak teks.
Apakah nilai mewakili jenis data yang memiliki kontrol umum khusus? Contohnya termasuk tanggal, waktu, atau alamat IPv4 atau IPv6. Jika demikian, gunakan kontrol yang sesuai, seperti kontrol tanggal daripada kotak teks.
Jika data adalah numerik:
- Apakah pengguna memahami pengaturan sebagai kuantitas relatif? Jika demikian, gunakan pengganda.
- Apakah pengguna akan mendapat manfaat dari umpan balik instan tentang efek perubahan pengaturan? Jika demikian, gunakan slider, mungkin bersama dengan kotak teks. Misalnya, pengguna dapat dengan mudah memilih warna menggunakan penggoser karena mereka dapat segera melihat efek perubahan pada nilai rona, saturasi, atau luminositas.

Konsep desain

Meskipun kotak teks memiliki manfaat yang sangat fleksibel, kotak teks memiliki kelemahan karena memiliki batasan minimal. Satu-satunya batasan pada kotak teks yang dapat diedit adalah:

Anda dapat secara opsional mengatur jumlah karakter maksimum.
Anda dapat secara opsional membatasi input ke karakter numerik (0 9) saja.
Jika Anda menggunakan kontrol putaran, Anda dapat membatasi pilihan kontrol putar ke nilai yang valid.

Selain panjang dan kehadiran opsional kontrol putaran, kotak teks tidak memiliki petunjuk visual yang menyarankan nilai yang valid atau formatnya. Ini berarti mengandalkan label untuk menyampaikan informasi ini kepada pengguna. Jika pengguna memasukkan teks yang tidak valid, Anda harus menangani kesalahan dengan pesan kesalahan.

Sebagai aturan umum, Anda harus menggunakan kontrol yang paling dibatasi yang Anda bisa. Gunakan kontrol yang tidak dibatasi seperti kotak teks sebagai upaya terakhir. Yang mengatakan, ketika Anda mempertimbangkan kendala, ingatlah kebutuhan pengguna global. Misalnya, kontrol yang dibatasi untuk Amerika Serikat Kode Pos tidak di globalisasi, tetapi kotak teks yang tidak dibatasi yang menerima format kode pos apa pun.

Pola penggunaan

Kotak teks adalah kontrol fleksibel dengan beberapa kemungkinan penggunaan.

Label	Nilai
Input data Kotak teks satu baris yang tidak dibatasi yang digunakan untuk memasukkan atau mengedit string pendek.	Kotak teks satu baris yang tidak dibatasi.
Input data yang diformat Sekumpulan kotak teks baris tunggal pendek berukuran tetap yang digunakan untuk memasukkan data dengan format tertentu.	Kotak teks yang digunakan untuk input data yang diformat. Catatan: Fitur keluar otomatis secara otomatis memajukan fokus input dari satu kotak teks ke kotak teks berikutnya. Salah satu kerugian dari pendekatan ini adalah bahwa data tidak dapat disalin atau ditempelkan sebagai satu unit.
Input data yang dibantu Kotak teks satu baris yang tidak dibatasi yang digunakan untuk memasukkan atau mengedit string, dikombinasikan dengan tombol perintah yang membantu pengguna memilih nilai yang valid.	Dalam contoh ini, perintah Telusuri membantu pengguna memilih nilai yang valid.
Input tekstual Kotak teks multibaris yang tidak dibatasi yang digunakan untuk memasukkan atau mengedit string panjang.	Kotak teks multibaris yang tidak dibatasi.
Input numerik Kotak teks satu baris, khusus numerik yang digunakan untuk memasukkan atau mengedit angka, dengan kontrol putar opsional untuk memfasilitasi input berbasis mouse.	Kotak teks yang digunakan untuk input numerik. Kombinasi kotak teks dan kontrol putar terkait disebut kotak putar.
Input kata sandi dan PIN Kotak teks satu baris yang tidak dibatasi yang digunakan untuk memasukkan kata sandi dan VPN dengan aman.	Kotak teks yang digunakan untuk memasukkan kata sandi.
Output data Kotak teks satu baris, baca-saja, selalu ditampilkan tanpa batas, digunakan untuk menampilkan string pendek.	Tidak seperti teks statis, data yang ditampilkan menggunakan kotak teks dapat digulir (berguna jika data lebih lebar dari kontrol), dipilih, dan disalin. Kotak teks satu baris baca-saja yang digunakan untuk menampilkan data.
Output tekstual Kotak teks multibaris baca-saja yang digunakan untuk menampilkan string panjang.	Kotak teks baca-saja yang digunakan untuk menampilkan data.

Panduan

Umum

Saat menonaktifkan kotak teks, nonaktifkan juga label, label instruksi, kontrol putar, dan tombol perintah terkait.
Gunakan lengkapi otomatis untuk membantu pengguna memasukkan data yang kemungkinan akan digunakan berulang kali. Contohnya termasuk nama pengguna, alamat, dan nama file. Namun, jangan gunakan lengkapi otomatis untuk kotak teks yang mungkin berisi informasi sensitif, seperti kata sandi, VPN, nomor kartu kredit, atau informasi medis.
Jangan membuat pengguna menggulir tidak perlu. Jika Anda mengharapkan data lebih besar dari kotak teks dan Anda dapat dengan mudah membuat kotak teks lebih besar tanpa membahayakan tata letak, ukuran kotak untuk menghilangkan kebutuhan untuk menggulir.

Salah:

Dalam contoh ini, kotak teks harus dibuat lebih lama untuk menangani datanya.
Bilah gulir:
- Jangan letakkan bilah gulir horizontal pada kotak teks multibaris. Gunakan pengguliran vertikal dan pembungkusan garis sebagai gantinya.
- Jangan letakkan bilah gulir pada kotak teks satu baris.
Untuk input numerik, Anda dapat menggunakan kontrol putaran. Untuk input tekstual, gunakan daftar drop-down atau daftar drop-down yang dapat diedit sebagai gantinya.
Jangan gunakan fitur keluar otomatis kecuali untuk input data yang diformat. Pergeseran fokus otomatis dapat mengejutkan pengguna.

Kotak teks yang dapat diedit

Batasi panjang teks input saat Anda bisa. Misalnya, jika input yang valid adalah angka antara 0 dan 999, gunakan kotak teks numerik yang dibatasi hingga tiga karakter. Semua bagian kotak teks yang menggunakan input data yang diformat harus memiliki panjang pendek dan tetap.
Jadilah fleksibel dengan format data. Jika pengguna cenderung memasukkan teks menggunakan berbagai format, coba tangani semua format yang paling umum. Misalnya, banyak nama, angka, dan pengidentifikasi dapat dimasukkan dengan spasi dan tanda baca opsional, dan kapitalisasi sering kali tidak masalah.
Jika Anda tidak dapat menangani format yang mungkin, memerlukan format tertentu dengan menggunakan input data yang diformat atau menunjukkan format yang valid dalam label.

Diterima:

Dalam contoh ini, kotak teks memerlukan input dalam format tertentu.

Lebih:

Dalam contoh ini, pola input data yang diformat digunakan untuk memerlukan format tertentu.

Terbaik:

Dalam contoh ini, kotak teks menangani semua format yang mungkin.
Pertimbangkan fleksibilitas format saat memilih panjang input maksimum. Misalnya, nomor kartu kredit yang valid dapat menggunakan hingga 19 karakter sehingga membatasi panjang untuk apa pun yang lebih pendek akan menyulitkan untuk memasukkan angka menggunakan format yang lebih panjang.
Jangan gunakan pola input data yang diformat jika pengguna lebih cenderung menempelkan data yang panjang dan kompleks. Sebaliknya, pesan pola input data yang diformat untuk situasi di mana pengguna lebih cenderung mengetik data.

Dalam contoh ini, pola input data yang diformat tidak digunakan, sehingga pengguna dapat menempelkan alamat IPv6.
Jika pengguna lebih mungkin akan memasukkan kembali seluruh nilai, pilih semua teks pada fokus input. Jika pengguna lebih cenderung mengedit, letakkan tanda sisipan di akhir teks.

Dalam contoh ini, pengguna lebih cenderung mengganti daripada mengedit, sehingga seluruh nilai dipilih pada fokus input.

Dalam contoh ini, pengguna lebih cenderung menambahkan kata kunci daripada mengganti teks, sehingga tanda sisipan ditempatkan di akhir teks.
Selalu gunakan kotak teks multibaris jika karakter baris baru adalah input yang valid.
Saat kotak teks adalah untuk file atau jalur, selalu sediakan tombol Telusuri.

Kotak teks numerik

Pilih unit yang paling nyaman dan beri label unit. Misalnya, pertimbangkan untuk menggunakan mililiter alih-alih liter (atau sebaliknya), persentase alih-alih nilai langsung (atau sebaliknya), dan sebagainya.

Benar:

Dalam contoh ini, unit diberi label, tetapi mengharuskan pengguna untuk memasukkan angka desimal.

Lebih:

Dalam contoh ini, kotak teks menggunakan unit yang lebih nyaman.
Gunakan kontrol putaran setiap kali membantu. Namun, terkadang kontrol spin tidak praktis, seperti ketika pengguna perlu memasukkan banyak jumlah besar. Gunakan kontrol putaran saat:
- Input kemungkinan adalah angka kecil, biasanya di bawah 100.
- Pengguna kemungkinan akan membuat perubahan kecil pada angka yang ada.
- Pengguna lebih cenderung menggunakan mouse daripada keyboard.
Rata kanan teks numerik setiap kali:
- Ada lebih dari satu kotak teks numerik.
- Kotak teks diratakan secara vertikal.
- Pengguna cenderung menambahkan atau membandingkan nilai.
Benar:

Dalam contoh ini, teks numerik diratakan dengan kanan untuk memudahkan membandingkan nilai.

Salah:

Dalam contoh ini, teks numerik salah rata kiri.
Selalu rata kanan nilai moneter.
Jangan menetapkan arti khusus untuk nilai numerik tertentu, bahkan jika arti khusus tersebut digunakan secara internal oleh aplikasi Anda. Sebagai gantinya, gunakan kotak centang atau tombol radio untuk pilihan pengguna eksplisit.

Salah:

Dalam contoh ini, nilai -1 memiliki arti khusus.

Benar:

Dalam contoh ini, kotak centang membuat opsi eksplisit.

Input kata sandi dan PIN

Selalu gunakan kontrol umum kata sandi alih-alih membuat kontrol Anda sendiri. Kata sandi dan VPN memerlukan perlakuan khusus untuk ditangani dengan aman.

Untuk panduan dan contoh selengkapnya, lihat Balon.

Output tekstual

Pertimbangkan untuk menggunakan warna sistem latar belakang putih untuk teks baca-saja multibaris yang besar. Latar belakang putih membuat teks lebih mudah dibaca. Banyak teks pada latar belakang abu-abu mencegah pembacaan.

Untuk informasi selengkapnya tentang warna latar belakang, lihat Font.

Output data

Jangan gunakan batas untuk kotak teks satu baris, baca-saja. Batas adalah petunjuk visual bahwa teks dapat diedit.
Jangan nonaktifkan kotak teks satu baris, baca-saja. Ini mencegah pengguna memilih dan menyalin teks ke clipboard. Ini juga mencegah pengguna menggulir data jika melebihi ukuran batasnya.
Jangan atur perhentian tab pada kotak teks satu baris, baca-saja kecuali pengguna kemungkinan perlu menggulir atau menyalin teks.

Validasi input dan penanganan kesalahan

Karena kotak teks biasanya tidak dibatasi untuk hanya menerima input yang valid, Anda mungkin perlu memvalidasi input dan menangani masalah apa pun. Validasi berbagai jenis masalah input sebagai berikut:

Jika pengguna memasukkan karakter yang tidak valid, abaikan karakter dan tampilkan balon masalah input yang menjelaskan karakter yang valid.

Dalam contoh ini, balon melaporkan karakter input yang salah.
Jika data input memiliki nilai atau format yang tidak valid, tampilkan balon masalah input saat kotak teks kehilangan fokus input.
Jika data input tidak konsisten dengan kontrol lain di jendela, berikan pesan kesalahan saat seluruh input selesai, seperti saat pengguna mengklik OK untuk kotak dialog modal.

Jangan hapus data input yang tidak valid kecuali pengguna tidak dapat memperbaiki kesalahan dengan mudah. Melakukannya memungkinkan pengguna untuk memperbaiki kesalahan tanpa memulai kembali. Misalnya, Anda harus menghapus kata sandi dan VPN yang salah karena pengguna tidak dapat memperbaikinya dengan mudah.

Untuk panduan dan contoh selengkapnya, lihat Pesan Kesalahan dan Balon.

Permintaan

Perintah adalah label atau instruksi singkat yang ditempatkan di dalam kotak teks sebagai nilai defaultnya. Tidak seperti teks statis, perintah menghilang dari layar setelah pengguna mengetik sesuatu ke dalam kotak teks atau mendapatkan fokus input.

cuplikan layar kotak teks perintah dengan label: pencarian

Perintah umum.

Gunakan perintah saat:

Ruang layar pada tingkat premium sehingga menggunakan label atau instruksi tidak diinginkan, seperti pada toolbar.
Perintah terutama untuk mengidentifikasi tujuan kotak teks dengan cara yang ringkas. Ini tidak boleh menjadi informasi penting yang perlu dilihat pengguna saat menggunakan kotak teks.

Jangan gunakan perintah hanya untuk mengarahkan pengguna untuk mengetik sesuatu atau mengklik tombol. Misalnya, jangan menulis teks perintah yang berbuah Masukkan nama file lalu klik Kirim.

Saat menggunakan perintah:

Gambar teks perintah dalam abu-abu miring dan teks input aktual dalam hitam normal. Teks perintah tidak boleh dikacaukan dengan teks asli.
Pertahankan teks prompt tetap ringkas. Anda dapat menggunakan fragmen alih-alih kalimat lengkap.
Gunakan kapitalisasi gaya kalimat.
Jangan gunakan tanda baca akhir atau elipsis.
Teks perintah tidak boleh dapat diedit dan harus hilang setelah pengguna mengklik atau tab ke dalam kotak teks.
- Pengecualian: Jika kotak teks memiliki fokus input default, perintah ditampilkan, dan menghilang setelah pengguna mulai mengetik.
Teks perintah dipulihkan jika kotak teks masih kosong saat kehilangan fokus input.

Ukuran dan penspasian yang direkomendasikan

gambar kotak teks satu baris dan dua baris

Ukuran dan penspasian yang direkomendasikan untuk kotak teks.

Lebar kotak teks adalah petunjuk visual dari ukuran input yang diharapkan. Saat mengukur kotak teks:

Pilih lebar yang sesuai untuk data terlama yang valid. Dalam sebagian besar situasi, pengguna seharusnya tidak perlu menggulir string terpanjang yang kemungkinan akan mereka masukkan atau lihat.
Sertakan tambahan 30 persen (hingga 200 persen untuk teks yang lebih pendek) untuk teks apa pun (tetapi bukan angka) yang akan dilokalkan.
Jika input yang diharapkan tidak memiliki ukuran tertentu, pilih lebar yang konsisten dengan kotak teks atau kontrol lain di jendela.
Ukuran kotak teks multibaris untuk menampilkan jumlah baris teks yang tidak terpisahkan.

Label

Label kotak teks

Semua kotak teks memerlukan label. Tulis label sebagai kata atau frasa, bukan sebagai kalimat, berakhir dengan titik dua, dan menggunakan teks statis.

Pengecualian:
- Kotak teks dengan perintah yang terletak di mana ruang berada di premium.
- Untuk pelabelan, sekelompok kotak teks yang digunakan untuk input data yang diformat harus diperlakukan sebagai kotak teks tunggal.
- Jika kotak teks berada di bawah tombol radio atau kotak centang, dan diperkenalkan oleh labelnya yang diakhir dengan titik dua, jangan letakkan label tambahan pada kotak teks.
- Hilangkan label kontrol yang mengembalikan instruksi utama. Dalam hal ini, instruksi utama mengambil titik dua (kecuali jika itu adalah pertanyaan) dan kunci akses.
  
  Diterima:
  
  Dalam contoh ini, label kotak teks hanyalah pemulihan dari instruksi utama.
  
  Lebih:
  
  Dalam contoh ini, label redundan dihapus, sehingga instruksi utama mengambil titik dua dan kunci akses.
Tetapkan kunci akses unik. Untuk panduan penetapan kunci akses, lihat Keyboard.
Gunakan kapitalisasi gaya kalimat.
Posisikan label di sebelah kiri atau di atas kotak teks, dan ratakan label dengan tepi kiri kotak teks. Jika label berada di sebelah kiri, ratakan teks label secara vertikal dengan teks kotak teks.

Benar:

Dalam contoh ini, label di atas selaras dengan tepi kiri kotak teks, dan label di sebelah kiri selaras dengan teks dalam kotak teks.

Salah:

Dalam contoh yang salah ini, label di atas meratakan dengan teks dalam kotak teks, dan label di sebelah kiri selaras dengan bagian atas kotak teks.
Anda dapat menentukan unit (misalnya, detik atau koneksi) dalam tanda kurung setelah label.
Jika kotak teks menerima jumlah karakter maksimum yang sangat kecil, Anda dapat menyatakan input maksimum dalam label. Lebar kotak teks juga harus menyarankan ukuran maksimum.

Dalam contoh ini, label memberikan jumlah karakter maksimum.
Jangan jadikan konten kotak teks (atau label unitnya) sebagai bagian dari kalimat, karena ini tidak dapat dilokalkan.
Jika kotak teks dapat digunakan untuk memasukkan beberapa item, perjelas cara memisahkan item dalam label.

Dalam contoh ini, pemisah item diberikan dalam label.
Untuk panduan tentang menunjukkan input yang diperlukan, lihat Input yang diperlukan dalam Kotak Dialog.

Label instruksi

Jika Anda perlu menambahkan teks instruksi tentang kotak teks, tambahkan di atas label. Gunakan kalimat lengkap dengan tanda baca akhir.
Gunakan kapitalisasi gaya kalimat.
Informasi tambahan yang berguna tetapi tidak perlu harus disingkat. Tempatkan informasi ini baik dalam tanda kurung antara label dan titik dua, atau tanpa tanda kurung di bawah kotak teks.

Dalam contoh ini, informasi tambahan ditempatkan di bawah kotak teks.

Label perintah

Pertahankan teks prompt tetap ringkas. Anda dapat menggunakan fragmen alih-alih kalimat lengkap.
Gunakan kapitalisasi gaya kalimat.
Jangan gunakan tanda baca akhir atau elipsis.
Jika perintah mengarahkan pengguna untuk memasukkan informasi yang akan ditindaklanjuti oleh tombol di samping kotak teks, cukup letakkan tombol di samping kotak teks. Jangan gunakan perintah untuk mengarahkan pengguna untuk mengklik tombol (misalnya, jangan menulis teks perintah yang mengatakan, Seret file lalu klik Kirim).

Dokumentasi

Saat merujuk ke kotak teks:

Gunakan jenis untuk merujuk ke interaksi pengguna yang memerlukan pengetikan atau penempelan; jika tidak, gunakan masukkan jika pengguna dapat memasukkan informasi ke dalam kotak teks menggunakan cara lain, seperti memilih nilai dari daftar atau menggunakan tombol Telusuri.
Gunakan pilih untuk merujuk ke entri dalam kotak teks baca-saja.
Gunakan teks label yang tepat, termasuk kapitalisasinya, dan sertakan kotak kata. Jangan sertakan garis bawah kunci akses atau titik dua. Jangan merujuk ke kotak teks sebagai kotak teks atau bidang.
Jika memungkinkan, format label menggunakan teks tebal. Jika tidak, letakkan label dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.

Contoh: Ketik kata sandi Anda ke dalam kotak Kata Sandi , lalu klik OK.
Jika kotak teks memerlukan format tertentu, dokumentasikan hanya format yang paling umum digunakan yang dapat diterima. Biarkan pengguna menemukan format lain sendiri. Anda ingin fleksibel dengan format data, tetapi melakukannya seharusnya tidak menghasilkan dokumentasi yang kompleks.

Benar:

Masukkan nomor seri bagian menggunakan format 1234-56-7890.

Salah:

Masukkan nomor seri bagian menggunakan salah satu format berikut:

1234567890

1234-56-7890

1234 56 7890