Membuat Form Login Dengan Php Dan Css
Lama tidak post ihwal pemrograman web, kali ini saya akan mencoba menciptakan form login dengan memakai php dan css. Form login ini di gunakan untuk keamanan web dalam mengakses suatu data maka di butuhkan sistem autentikasi berupa user dan password.
Login merupakan proses penting untuk menjaga keamanan dalam sebuah website, supaya aplikasi di dalam website dilarang di saluran oleh sembarang orang oleh alasannya yaitu itu proses login di gunakan untuk pengaman masing masing akun yang sudah terdaftar.
Kelengkapan sofware
1. XAMPP
2. Notepad ++
3. Browser
Nah eksklusif saja berikut scrip programnya
1. Buatlah file index.php kemudian copy paste scrip berikut ini simpan kemudian simpan di folder htdocs/formlogin
<html> <head> <title>CSS Desain Form Login Minimalis</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="tengah">Contoh Form Login</h1> <div class="konten"> <div class="atas"> <div class="grup"> </div> <form action="#" method="post"> <div class="grup"> <input type="text" placeholder="Isikan Username Anda"> </div> <div class="grup"> <input type="password" placeholder="Isikan Password Anda"> </div> <div class="jarakatas30"> <div class="grup tengah"> <button type="submit" class="tombol kirim">Submit</button> <button type="button" class="tombol hapus">Clear</button> </div> </div> <div class="grup"> <div class="kiri"> </div> <div class="kanan"> </div> </div> </form> </div> <div class="bawah tengah"> </div> </div> </body> </html> 2. Setelah itu buat file style.css copy paste script berikut ini lalu simpan di folder htdocs/formlogin
*{ padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif; } body{ background: #c0c0c0; } h1{ color: #01afee; margin-top: 70px; font-size: 32px; } a{ text-decoration: none; } div.konten{ background: #ffffff; width: 380px; margin: 20px auto 10px; border-radius: 5px; overflow: hidden; } .tengah{ text-align: center; } .jarakatas30{ margin: 30px 0; } div.kiri{ float: left; } div.kanan{ float: right; } span{ font-size: 13px; } /** * Desain Bagian Atas * */ div.atas{ height: 290px; padding: 30px 30px 0; } div.grup{ margin: 10px 0; } a.a{ font-size: 13px; color: #808080; } a.a.garisbawah{ text-decoration: underline; } a.a.tombol{ font-size: 14px; padding: 0 7px; border-radius: 3px; color: #ffffff; display: inline-block; line-height: 28px; width: 49.3%; } a.a i{ margin-right: 10px; } form{ margin: 20px 0; } input[type="text"], input[type="password"]{ width: 100%; height: 30px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; color: #454545; outline: none; } input[type="text"]:focus, input[type="password"]:focus{ border: 1px solid #e9cd00; } button.tombol{ color: #ffffff; width: 88px; height: 28px; border: none; font-weight: bold; cursor: pointer; } button.tombol.kirim{ background: #e9cd00; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } button.tombol.kirim:hover{ background: #ccb400; } button.tombol.hapus{ background: #01afee; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } button.tombol.hapus:hover{ background: #0195cb; } /** * Desain Bagian Bawah * */ span.info{ color: #e6f8ff; line-height: 70px; } Setelah semua scrip di simpan pada folder htdocs di xampp, silahkan saluran http://localhost/formlogin akan tampil ibarat gampar di bawah ini.
0 Response to "Membuat Form Login Dengan Php Dan Css"
Posting Komentar