Tugas 6: Membuat Form Login dan Contact dengan Bootstrap
Nama: Dyandra Paramitha Widyadhana
NRP: 05111940000119
Kelas: PWEB-B
Link Website:
1. Sign In Form: https://dydyandra.github.io/bootstrap-forms/
2. Contact Form: https://dydyandra.github.io/bootstrap-forms/contact.html
Link Source Code: https://github.com/dydyandra/bootstrap-forms
Introduction
Pada penugasan ke-6, kami diminta untuk membuat form login dan contact dengan menggunakan Bootstrap.
Isi dari Form
Komponen yang digunakan pada form adalah card yang berisi form dan button. Adapun isi dari form yaitu:
1. Form Login
Form login berisi input username, password, dan button. Selain itu terdapat button untuk login menggunakan website lain seperti Google, Facebook atau SSO.
2. Form Contact
Form contact berisi input nama depan, nama belakang, email, keperluan dan pesan. Terdapat juga button untuk mengirimkan pesan tersebut.
Tools Yang Digunakan:
Untuk membuat, saya menggunakan HTML, CSS dan JS.
HTML sebagai markup language digunakan untuk membuat struktur dan konten dari form login dan contact. HTML yang saya gunakan yaitu HTML:5.
CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat internal CSS untuk menambahkan beberapa style pada komponen.
JS untuk menambahkan validasi input form, dan untuk menambahkan modal yang akan muncul apabila form sudah disubmit.
Untuk men-deploy, saya menggunakan Github Pages.
Gambar Form:
Source Code:
Login Form:
Contact Page:
Link Source Code: https://github.com/dydyandra/bootstrap-forms
Penutup
Bootstrap memiliki banyak manfaat dalam pembuatan web, yaitu fleksibel dikarenakan dapat digunakan berulang kali dan juga desainnya yang responsif sehingga proses membangun website dapat menjadi lebih cepat, mudah, dan efisien. Selain itu, penggunaan bootstrap juga meminimalisir bug, dan juga ukuran file yang lebih kecil.
Tugas 6: Membuat Form Login dan Contact dengan Bootstrap
Reviewed by Dyandra Paramitha
on
October 18, 2021
Rating: 5
Reviewed by Dyandra Paramitha
on
October 18, 2021
Rating: 5
