Tutorial Membuat Form Login Minimalis Dengan HTML & CSS

Pada tulisan kali ini saya akan menjelaskan tutorial cara membuat form login minimalis dengan HTML dan CSS. Sebelum membuat form loginnya, saya akan menjelaskan pengertian dari form login. Form login ialah area halaman awal dimana pada halaman tersebut seorang netizen diharuskan mengisi username dan password, contohnya, sebelum kita masuk ke beranda facebook pasti sebelumnya kita berada di halaman form login yang mengharuskan kita untuk mengisi username dan password, setelah kita mengisi username dan passwordnya dengan benar maka kita akan dialihkan ke halaman beranda facebook tersebut.

Gambar dibawah ini merupakan form login yang akan kita buat minimalis simple dan clean

Pertama kita buat script HTML nya

untuk menuliskan script html dan css disini saya menggunakan bantuan software notepad ++, ada juga alternatif lain teman teman bisa menggunakan software sublime text ataupun adobe dreamweaver.                                                                                                                    jika teman teman ingin mendownloadnya saya sediakan linknya dibawah ini :                                                                                            notepad ++ silahkan klik link berikut ini https://notepad-plus-plus.org/download                                                                                                sublime text silahkan klik link berikut ini https://www.sublimetext.com/                                                                                                              adobe dreamweaver silahkan klik link berikut ini https://www.adobe.com/products/dreamweaver.html

Pada script line 3 berfungsi untuk memberi nama pada title bar, Pada saat script ini dijalankan di web browser, Lebih jelasnya lihat gambar di bawah ini

pada line 4 ini saya menggunakam font awesome, Sebelum saya jelaskan kinerja script pada line 4 alangkah lebih baiknya teman teman mengetahui apa itu font awesome. Font awesome adalah kumpulan ikon (icon) yang dibuat menggunakan font icon system yang memungkinkan kita untuk menggunakan ikon dengan bantuan CSS tanpa takut ikon pecah atau buram.

Gambar dibawah ini merupakan contoh font awesome

untuk mendownloadnya teman teman cukup klin link http://fontawesome.io/                                                                                                  pada script line 4 untuk memanggil font awesome yang mana file font awesome berada di dalam folder css2.                                                    lalu pada line 5 ada kode css yang berfungsi memperindah kode- kode html, yang mana saya menggunakan penulisan kode css internal, artinya di dalam file html terdapat kode-kode css untuk penulisan kode css internal harus berada didalam tag head

pada script line 10 berfungsi untuk menjadikan gambar sebagi background image yang mana pada line 10 ini, saya menggunakan penulisan kode css inline artinya di dalam baris kode html terdapat juga kode cssnya, sedangakan pada line 11 berfungsi untuk membuat tulisan di dalam h1 menjadi di tengah ,gambar di bawah ini merupakan hasil script yang sudah kita tulis pada notepad ++.

selanjutnya kita ubah tulisan ACCOUNT LOGIN berwarna putih dan turunkan posisinya menggunakan css,

pada line 7 terdapat kode html .text- h1 yang mana pada line 8 akan kita ubah warna nya menjadi putih dan pada line 9 kita turunkan posisinya dengan margin-top, selanjutnya pada line 10 kita atur padding-bottom dan yang terakhir pada line 11 kita ubah fontnya menjadi ubuntu,

sehingga jika kode dijalankan maka akan terlihat perubahan nya

selanjutnya pada line 17 kita buat div baru dengan class body, div ini dibuat untuk mejadikan background dari form login yang akan kita buat, selanjutnya kita atur div body di css menjadi seperti gambar di bawah ini sedangkan pada line 18 ada table dengan class table di dalam table terdapat tr dan th

dari script diatas bisa kita lihat kita mengatur mulai dari panjang tinggi warna dan border – radius (digunakan untuk membuat sudut menajdi rounded), ketika kode tersebut dijalankan akan seperti gambar di bawah ini

selanjutnya kita akan mempercantik input type Username dan passwordnya , dengan menambahkan kode css seperti pada gambar dibawah ini

pada line 21 berfungsi menambah panjang dan tinggi pada input type Username dan password, lalu pada margin-top berfungsi menurunkan posisi input type Username dan password, agar lebih sesuai dengan contohnya maka yang terakhir pada line 23 bertujuan untuk menghilangkan border dari input type Username dan password. Sehingga jika kodenya dijalankan maka hasilnya akan seperti gambar dibawah ini

selanjutnya kita akan mempercantik button nya dengan css untuk kodenya bisa dilihat dibawah ini

fungsi dari script diatas kita akan memepercantik button nya dengan menambah panjang dan tingginya dengan menggunakan padding, kita buat sudut tiap button menjadi rounded lalu kita hilangkan outline nya dengan border none lalu kita ubah warna dari backhroundnya menjadi warna orange. jika sudah diubah kodenya maka hasilnya akan menjadi seperti gambar dibawah ini

Selanjutnya kita akan memperbesar ukuran dari font awesome yang berada di masing masing inpu type dengan menuliskan kode css seperti gambar di bawah ini

Maksud dari script pada line 41 kita akan menambah panjang dan tinggi dari icon user dan lock lalu kita ubah warna nya menjadi abu-abu, ketika dijalankan maka hasilnya seperti gambar di bawah ini

dan yang terakhir kita atur input placeholdernya, dengan kode css di bawah ini

pada line 47 kita ubah warna placeholdernya menjadi abu-abu, sedangkan pada line 48 kita ubah ukuran fontya menjadi lebih besar dan kita ubah fontnya dengan memakai font lato,

ketika sudah diubah maka hasilnya akan seperti gambar di bawah ini

dan yang terakhir kita sudah selesai membuat form login dengan html dan css mudah bukan teman teman, selamat mencoba semoga berhasil.