Baiklah guys sebelum kita membuat form login alangkah baiknya sobat sudah memahami dasar html dan css, berikut link yang membahas tentang tutorial html dan css
Pelajari HTML 5 Lengkap
Tutorial Belajar CSS Dasar Untuk Pemula
Teman-teman diharapkan dapat memahami dasar-dasar HTML dan CSS secara sekilas, agar kedepannya jika melakukan pemrograman web tidak terlalu rumit atau membingungkan karena sudah mengetahui dasar-dasarnya.
Bootstrap
Oiya sebelumnya kita juga akan mengenal Bootstrap, Bootstrap atau dikenal dengan Framework CSS, HTML, Javascript yang populer dan mudah digunakan. Bootstrap biasanya lebih sering digunakan untuk desain website yaitu pada bagian Front-End Website
Oiya pada postingan sebelumnya kita juga sempat membahas website sekolah yang kita buat dengan menggunakan Bootstrap Framework, ini linknya
Buat Website Sekolah yang Responsif dengan Bootstrap
Pada postingan sebelumnya kita sudah membuat tampilan form login dengan HTML, CSS dan Bootstrap, bagi sobat yang ingin melihatnya bisa mengunjungi link dibawah ini.
Formulir Login Sederhana dengan HTML, CSS dan Bootstrap
Membuat Formulir Pendaftaran
Dalam pembuatan form registrasi ini kita akan menggunakan Framework Help dari Bootstrap sob, dan juga akan menambahkan style nantinya. css agar form login kita lebih responsif
Formulir Pendaftaran digunakan oleh pengguna untuk mendaftarkan diri ke sistem yang ingin menjadi anggota atau mitra sistem
Teman baik, berikut ini adalah sintaks dalam formulir pendaftaran
Formulir pendaftaran
Registrasi Page
Registrasi
Silahkan Daftar dengan Email Anda!
Email address
Username
Password
Register
Sudah Punya Akun?
Login
Ya diatas ada script php yang nantinya akan kita gunakan untuk syarat berhasil daftar atau tidak. Insya Allah kedepannya akan kami share cara membuat Web CRUD dengan PHP
Gaya File. css
body {
background-color: #ffc107;
}
.col-sm {
position: absolute;
left: 50%;
top: 50%;
transform: translate[-50%, -50%];
width: 30%;
padding: 20px;
}
@media screen and [max-width: 900px] {
.col-sm {
position: absolute;
left: 50%;
top: 50%;
transform: translate[-50%, -50%];
width: 50%;
padding: 20px;
}
}
@media screen and [max-width: 600px] {
.col-sm {
position: absolute;
left: 50%;
top: 50%;
transform: translate[-50%, -50%];
width: 80%;
padding: 20px;
}
}
_Jika melihat sintaks di atas, ada layar @media dengan max-widths yang berbeda, nah itu css yang digunakan agar formulir pendaftaran kita lebih responsif. Direkomendasikan untuk gaya panggilan. css ada dalam satu folder sob
Nah, berikut adalah hasil form registrasi + style css yang sudah kita buat diatas
Berikut adalah hasil form registrasi sederhana di Desktop
Berikut adalah hasil form login sederhana di iPad
Berikut adalah hasil form login sederhana di iPhone atau Smartphone
Berikut adalah hasil dari formulir Registrasi Responsif sederhana
Pada gambar terakhir yaitu saya mencoba dengan opsi responsive yang artinya form registrasi akan mengikuti layout atau ukuran perangkat yang digunakan untuk membuka halaman registrasi
Nah, cukup sekian tutorial membuat Formulir Pendaftaran Sederhana Menggunakan HTML, CSS dan Bootstrap. Semoga tutorial ini bermanfaat bagi kita semua