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

Checkbox dengan banyak pilihan

Checkbox dengan banyak pilihan

Biasanya terdapat banyak pilihan dan user bisa memilih lebih dari satu pilihan. Seperti memilih hobi, memilih makan kesukaan.

 

Checkbox yang hanya memiliki satu opsi

Checkbox yang hanya memiliki satu opsi

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 🙂

UI Designer at Paperpillar, writer at Insight