Makalah Imk 2019.docx

KOMPONEN FORM

MAKALAH Diajukan untuk Memenuhi Tugas Mata Kuliah Interaksi Manusia dan Komputer Semester Genap Tahun Akademik 2018/2019

Disusun oleh: DAMAR DWIYANTO

1652500321

ANDRE ADE KURNIA

1652500339

RIFQI PUTRA RISWARTA

1652500305

HENDRIK TRI APRI AR

1652500313

PRAHYUDI SETIAWAN

1652500263

PROGRAM STUDI TEKNIK ELEKTRO FAKULTAS TEKNIK UNIVERSITAS BUDI LUHUR JAKARTA 2019

KATA PENGANTAR

Dengan memanjatkan puji syukur kehadirat Tuhan Yang Maha Esa yang telah melimpahkan rahmat dan karunia-Nya kepada penulis sehingga penulis dapat menyelesaikan penulisan makalah dengan judul “KOMPONEN FORM“. Makalah ini ditulis untuk memenuhi salah satu tugas akhir semester mata kuliah Interaksi Manusia dan Komputer di Universitas Budi Luhur Jakarta. Pada kesempatan yang baik ini, izinkanlah penulis menyampaikan rasa hormat dan ucapan terima kasih kepada semua pihak yang dengan tulus ikhlas telah memberikan bantuan dan dorongan kepada penulis dalam menyelesaikan penulisan makalah ini, terutama kepada: Asep Abdul Rohman, M.Kom Selaku Dosen Mata Kuliah Interaksi Manusia dan Komputer Universitas Budi Luhur. Penulis menyadari bahwa makalah ini masih banyak kekurangan baik bentuk, isi, maupun teknik penyajiannya. Oleh sebab itu, kritikan yang bersifat membangun dari berbagai pihak penulis terima dengan tangan terbuka dan sangat diharapkan. Semoga kehadiran makalah ini memenuhi sasarannya.

1

DAFTAR ISI

KATA PENGANTAR ...............................................................................................1 DAFTAR ISI .............................................................................................................2 BAB I ........................................................................................................................3 PENDAHULUAN .....................................................................................................3 1.1. Latar Belakang ...................................................................................................... 3 1.2. Rumusan Masalah ............................................................................................... 3 1.3. Tujuan Penulisan .................................................................................................. 3 1.4. Manfaat Penulisan ................................................................................................ 3 BAB II .......................................................................................................................3 PEMBAHASAN .......................................................................................................4 2.1. Form ....................................................................................................................... 4 2.2. Komponen-komponen Form ............................................................................... 4 2.2.1. Input Text ........................................................................................................ 4 2.2.2. Select Box ...................................................................................................... 5 2.2.3. Checkbox........................................................................................................ 6 2.2.4. Radio Button .................................................................................................. 8 2.2.5. Textarea.......................................................................................................... 9 2.2.6. Datepicker .................................................................................................... 10 2.2.7. Autocomplete ............................................................................................... 11 2.2.8. Normal, Hover, Active, Disable ................................................................. 11 BAB III .................................................................................................................... 13 PENUTUP .............................................................................................................. 13 3.1. Kesimpulan .......................................................................................................... 13 DAFTAR PUSTAKA ...................................................................................................... 14

2

BAB I PENDAHULUAN

1.1. Latar Belakang Dalam perkembangan teknologi yang cepat ini manusia sangat membutuhkan dunia digital dalam kehidupan sehari-hari dalam bentuk pekerjaan, hobi, dan lain-lain. Oleh karna itu 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.2. Rumusan Masalah Adapun rumusan masalah yang akan di bahas pada makalah ini, antara lain: 1. Pengertian form? 2. Apa saja komponen form?

1.3. Tujuan Penulisan Tujuan yang didapat dari penulisan makalah ini adalah: 1. Untuk mengetahui apa itu form 2. Untuk mengetahui komponen pada form 1.4. Manfaat Penulisan Manfaat dari penulisan ini adalah: 1. Mahasiswa dapat memahami fom 2. Mahasiswa dapat memahami komponen-komponen form

3

BAB II PEMBAHASAN

2.1. Form Form dapat didefinisikan sebagai suatu interface atau antarmuka guna membantu pengguna atau operator untuk mengelola data dalam database.

2.2. Komponen-komponen Form 2.2.1. Input Text Komponen Form yang pertama adalah Text. Komponen text ini biasanya dipakai ketika kita melakukan pendaftaran account di kolom nama,dll. Adapun Komponen text ini hanya dapat digunakan untuk menuliskan kata dalam satu baris saja.

4

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.2.2. Select Box Komponen form berikutnya adalah Select. Dalam Select ini user akan diminta memilih satu pilihan dari beberapa pilihan yang ditampilkan secara dropdown. Biasanya digunakan untuk memasukkan tanggal lahir, dll.

5

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.

2.2.3. Checkbox Komponen form yang selanjutnya adalah Check Box. Check box ini memiliki tampilan yang hampir mirip dengan Radio Button, namun di Check Box ini kita dapat memilih lebih dari satu pilihan yang tersedia. Penggunaanya dapat ditemui di isian Hobby,dll dalam sebuah form pendaftaran. 6

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

7

2.2.4. Radio Button Komponen form yang selanjutnya adalah Radio Button. Radio Button ini merupakan komponen form yang mana membuat user harus memilih salah satu pilihan yang tersedia. Contoh penggunaanya adalah untuk inputan jenis kelamin, dll.

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. 8

2.2.5. Textarea Komponen Form yang selanjutnya adalah Textarea. Komponen Textarea ini biasanya dipakai ketika kita diminta memasukkan inputan dalam jumlah karakter yang panjang seperti ketika menginputkan alamat atau memasukkan komentar di suatu website. Dalam textarea jumlah karakter yang dapat dimasukkan bisa lebih dari satu baris.

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.

9

2.2.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.

10

2.2.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.

2.2.8. Normal, Hover, Active, Disable

Bukan merupakan inputan, 4 hal tersebut adalah kondisi (state) suatu inputan. 

Normal: Kondisi awal suatu inputan

11



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 nonactive, hal ini biasanya karena sistem yang mengaturnya.

12

BAB III PENUTUP

3.1. Kesimpulan 1. Alasan penggunaan Form yaitu guna membantu pengguna atau operator untuk mengelola data dalam database. 2. Saat menggunakan produk digital entah itu web atau app kita sering menjumpai form saat login ataupun saat mengisi data diri. Form adalah salah satu solusi teknologi yang terbaik dalam dunia digital dalam membantu manusia.

13

DAFTAR PUSTAKA dwinawan. (2017, November 19). Mengenal Komponen Form. Retrieved Maret 1, 2019, from Medium.com: https://medium.com/insightdesign/mengenalkomponen-form-c7520ff10325 prasetyo, a. (2016, Januari 25). Komponen-komponen form dalam HTML. Retrieved Maret 1, 2019, from adriyantoprasetyo.blog.uns.ac.id: https://adriyantoprasetyo.blog.uns.ac.id/komponen-komponen-formdalam-html/ Romi. (2016, April 3). Pengertian Form dan Komponen. Retrieved Maret 1, 2019, from kom-tekno.blogspot.com: https://komtekno.blogspot.com/2016/04/pengertian-form-dan-komponen-atau.html

14