Lama tidak post tentang pemrograman web, kali ini saya akan mencoba membuat form login dengan menggunakan 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, agar aplikasi di dalam website tidak boleh di akses oleh sembarang orang oleh karena itu proses login di gunakan untuk pengaman masing masing akun yang sudah terdaftar.
Kelengkapan sofware
1. XAMPP
2. Notepad ++
3. Browser
Nah langsung saja berikut scrip programnya
1. Buatlah file index.php lalu copy paste scrip berikut ini simpan lalu 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 akses http://localhost/formlogin akan tampil seperti gampar di bawah ini.
Tags
php