Mengenal Komponen Form
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.
Komentar
Posting Komentar