Akses komponen form

- Juli 31, 2019

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. Text area

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. Date picker

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. Auto complete

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