Saat menggunakan produk digital entah itu web atau app kita sering menjumpai form saat login ataupun saat mengisi data diri. Kali ini kita akan membahas tentang komponen form satu persatu. Mulai dari fungsi, bentuk dan bagaimana tips penggunaannya.
1. Input Text
Berfungsi untuk memasukkan inputan berupa angka maupun teks. Teks yang diketikkan disini biasanya tidak terlalu panjang.
Tips Penggunaan:
Sebaiknya inputan teks digunakan untuk memasukkan data yang tidak terlalu panjang seperti Nama, Nomor Telepon.
2. Select Box
Bentuknya mirip dengan input teks, tapi memiliki indikator anak panah di sebelah kanan. Saat diklik akan memunculkan pilihan yang disediakan oleh sistem dan user hanya bisa memilih satu opsi saja. Contohnya: Memilih Provinsi, Memilih tahun lahir
Tips Penggunaan:
Kalau opsinya kurang dari 5 sebaiknya jangan menggunakan select box, tapi bisa menggunakan radio button. Kenapa? agar user bisa langsung melihat semua opsinya tanpa harus mengklik sesuatu.
Select Box cocok digunakan jika opsinya ada banyak. Kenapa? agar tidak memakan tempat.
3. Checkbox
Biasanya terdapat banyak pilihan dan user bisa memilih lebih dari satu pilihan. Seperti memilih hobi, memilih makan kesukaan.
Tetapi checkbox juga bisa hanya terdapat satu pilihan yaitu pada terms and condition ataupun untuk memunculkan sesuatu seperti form tambahan atau info tambahan.
Tips Penggunaan
Ukuran checkbox pada website cenderung lebih kecil dibandingkan pada aplikasi. Kenapa? karena pada website user memilih checkbox menggunakan mouse/cursor. Sedangkan pada aplikasi user memilih checkbox menggunakan jempol atau jari sehingga diperlukan ukuran yang lebih besar.
4. Radio Button
Digunakan untuk memilih satu opsi diantara beberapa opsi. Hampir sama dengan select box, tapi perbedaan di Radio Button adalah semua opsinya terlihat.
Contoh penggunaannya: Di opsi sekali jalan atau pulang pergi pada pencarian tiket pesawat/kereta api, Pemilihan Gender, Pemilihan Golongan Darah
Tips Penggunaan
Radio Button akan efektif jika opsinya kurang dari 6 atau 5. Jika opsinya terlalu banyak maka gunakan Select Box.
5. Textarea
Mirip dengan input teks, tetapi textarea lebih tinggi dan cenderung lebih panjang.
Tips Penggunaan
Textarea cocok digunakan untuk menuliskan sesuatu yang panjang. Seperti Alamat, Komentar.
6. Datepicker
Sesuai dengan namanya, komponen ini digunakan untuk memilih tanggal. Bentuknya mirip dengan Input Text, tapi biasanya terdapat icon kalender di sebelah kanan untuk mengindikasikan bahwa user bisa memilih tanggal dengan meng-klik icon tersebut. Setelah user mengklik icon tersebut akan muncul kalender
7. Autocomplete
Anda pernah mencari suatu barang di toko online, lalu setelah mulai mengetik ada beberapa saran yang muncul dibawahnya? itulah autocomplete. Autocomplete sebenarnya bukan termasuk inputan, tetapi lebih ke alat bantu user untuk mempercepat menginputkan sebuah isian.
8. Normal, Hover, Active, Disable
Bukan merupakan inputan, 4 hal tersebut adalah kondisi (state) suatu inputan.
- Normal: Kondisi awal suatu inputan
- Hover: Kondisi suatu inputan ketika user meletakan mouse diatas inputan
- Active: Kondisi suatu inputan ketika user meng-klik inputan tersebut
- Disable: Kondisi suatu inputan yang tidak bisa diklik atau non-active, hal ini biasanya karena sistem yang mengaturnya.
Semoga bermanfaat :)
