 |
| Cara Membuat Form Login dengan HTML dan CSS (Tutorial Web Design) |
Sebelum melakukan tutorial kali ini. Siapkan aplikasi code editor dan browser dengan versi terbaru. Aplikasi yang saya gunakan untuk membuat form login ini adalah atom. Karena apa? Atom memiliki banyak ekstensi yang dapat mempercepat kinerja kita kerja.
Anda dapat menggunakan code editor yang lain seperti visual studio code, notepad++, coda, dan lain lain. Lanjut, saya akan jelaskan sedikit mengenai html dan css secara umum.
HTML (Hyper Text Markup Language) itu merupakan kerangka untuk membuat website sedangkan CSS (Cascading Style Sheet) merupakan komponen untuk memperindah tampilan agar nyaman dilihat. Jadi analoginya begini html sebagai kerangka dan badan dan css sebagai pakaiannya.
Lanjut lagi kita ke source code untuk membuat tampilan halaman login ini. Saya menggunakan jenis css Embedded style sheet. Embedded style sheet merupakan penempatan code css yang terletak pada satu halaman saja. Jadi tidak perlu membuat file (style.css) sendiri di halaman lain.
Siapkan Folder Untuk Project Login
Buat folder dengan nama bebas, lalu simpan file html anda di folder tersebut. di dalam folder tersebut buat folder font dan img. Font digunakan untuk meletakkan font untuk tampilan web login. Dan img untuk menyimpan file gambar.Baca juga : Cara Upload File Dengan Ajax (Upload file tertanpa reload)
Itu semua dilakukan agar file dapat tertata dengan rapi dan mudah ketika akan dipanggil nanti. Ok saya akan berikan source code untuk tampilan form login yang saya buat. Hasil outputnya akan seperti gambar di atas.
Itu semua dilakukan agar file dapat tertata dengan rapi dan mudah ketika akan dipanggil nanti. Ok saya akan berikan source code untuk tampilan form login yang saya buat. Hasil outputnya akan seperti gambar di atas.
Source Code HTML
Anda dapat menyalin source code ini. Tapi saya sarankan agar anda dapat menulis ulang source code sederhana ini. Supaya anda dapat terbiasa dan dapat belajar dari source code ini. Langkah sederhananya begini kita buat dulu struktur html baru kita buat code css-nya.Saya akan jelaskan sedikit mengenai kode HTML yang admin buat. Disini ada dua komponen kode penting yang perlu saya jelaskan yaitu :
<meta name="viewport" content="width=device-width, initial-scale=1"> kode Ini merupakan komponen pendukung dalam pengaturan responsive web anda. <form id="login" action="" method="post">...</form> kode ini digunakan untuk membuat formulir login, penggunaan properti action digunakan jika telah menggunakan database.
Untuk kode input type="text" untuk memasukan inputan berupa text saja. input type="password" untuk memasukan inputan berupa password, jadi saat kita mengetikan pada inputan jenis ini akan disembunyikan dengan simbol.
input type="submit" untuk melakukan eksekusi pada semua input yang telah diisikan. input type="reset" digunakan untuk menghapus semua form yang tadinya telah terisi (reset=mengatur mengulang). Tapi ingat form login ini masih bersifat statis ya.
Source Code CSS
Ok lanjut lagi kita mulai untuk membuat tampilan form login tersebut dengan menggunakan CSS. Perhatikan penggunaan kurung kurawal “ { } ” dan penggunaan tanda titik koma “ ; ” di setiap akhir perintah css.
Itulah bagian css-nya yaitu diantara kode <style media="screen">...</style> yang terletak di atas body inilah yang digunakan untuk mengatur tampilan web anda. Untuk penggunaan nama css “backlogin, inputa, wed” pada source kode diatas dapat anda ganti dengan yang lain.
Kode css “@font-face” digunakan untuk memasukan font yang ada di folder font yang telah kita buat sebelumnya. Setelah font dimasukan lalu kita panggil dengan menggunakan kode “font-family : Product Sans;”. Jenis font yang saya gunakan product sans dan opensans-light.
Penggunaan perintah css “ background-image: url(img/back4.png); ” merupakan kode untuk mengganti background dengan gambar yang terletak di folder img dengan nama file “ back4.png ”. Anda dapat menggunakan gambar yang anda punya tidak harus sama seperti punya admin.
Perintah css border digunakan untuk mengatur ketebalan pada pinggiran bentuk. Sedangkan border-radius digunakan mengatur ketebalan border dan efek lengkungan pada setiap ujung bentuk. Jika anda berikan border-radius sebesar 50px akan tampak lengkungannya.
Jika kedua kode html dan css tersebut disatukan menjadi seperti ini :
Inilah yang dinamakan CSS Embedded style sheet, dan sekedar informasi penggunaan css dapat dibedakan menjadi 3 macam yaitu Inline style sheet, External style sheet, dan Embedded style sheet. Yang membedakan hanya penempatan kode css-nya saja.
Jika ingin menjadikan halam login terebut menjadi web login dinamis. Anda bisa menggunakan bahasa pemrograman php, mysql dan menggunakan database tentunya. Penggunaan database digunakan untuk menyimpan user yang dapat login dari web anda.
Ayo lihat vidio lengkap implementasi tutorial membuat form login, disertai cara load font, img.
Inilah artikel Cara Membuat Form Login dengan HTML dan CSS. Jika anda meminta admin untuk membuat form login dinamis yaitu menggunakan php dan mysql anda dapat komentar dibawah. Sekian, kurang lebihnya saya mohon maaf dan semoga dapat bermanfaat.