by mateogf7

Membuat Form Login dengan HTML & CSS

Ditulis pada 

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.

Itu semua dilakukan agar file dapat tertata dengan rapi dan mudah ketika akan dipanggil nanti.

Source Code

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.

1234567891011121314151617181920212223242526<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Login</title><meta name="viewport" content="width=device-width, initial-scale=1"></head> <body><center><div id="backlogin"><h1>Login</h1><hr> <form id="login" action="" method="post"> <input type="text" class="inputa" name="" value="" placeholder="Masukan Username"> <input type="password" class="inputa" name="" value="" placeholder="Masukan password"> <input type="submit" class="wed"name="" value="Submit"> <input type="reset" class="wed" name="" value="Reset"> </form> </div></center></body></html>

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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<style media="screen">body {background-image: url(img/back4.png);background-repeat: no-repeat;background-size: cover;} #backlogin {background: white;width: 35%;height: 350px;border: 1px solid #d2d2d2;border-radius: 5px;margin-top: 150px;} @font-face {src: url('font/Product Sans Regular.ttf');font-family: Product Sans;} @font-face {src: url('font/OpenSans-Light.ttf');font-family: OpenSans-Light;} #backlogin form {margin-top: 15px;float: left;padding: 5px;} #backlogin .inputa {width: 90%;margin-top: 1px;height: 50px;border: 0px;border-bottom: 1px solid #6a82fb;font-size: 16px;font-family: OpenSans-Light;background: transparent;} #backlogin .wed {margin-top: 40px;width: 45%;height: 40px;background: #6a82fb;border: none;color: white;font-family: product sans;font-size: 20px;border-radius: 5px;} #backlogin h1 {text-align: center;padding: 5px;color: #6a82fb;font-family: Product Sans;} #backlogin hr {width: 50%;height: 4px;border: none;background: #6a82fb;}</style>

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.
x
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 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.

Leave a comment