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 non-
active, 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/mengenal-
komponen-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-form-
dalam-html/

Romi. (2016, April 3). Pengertian Form dan Komponen. Retrieved Maret 1, 2019,
from kom-tekno.blogspot.com: https://kom-
tekno.blogspot.com/2016/04/pengertian-form-dan-komponen-atau.html

14