Assalamualaikun sobat Blogger, Kali ini saya akan berbagi cara membuat form login di tengan layar menggunakan HTML dan CSS.
Berikut Kode CSS nya:
.login {
margin:250px auto;
border:1px solid #ccc;
padding:10px 30px;
background:lightblue;
width:400px;
}
input[type=text], input[type=password] {
width:100%;
margin:5px auto;
padding:10px;
}
input[type=submit] {
margin:5px auto;
cursor:pointer;
background:#008992;
color:#fff;
border:1px solid #fff;
width:90px;
padding:5px;
float:right;
}
.checkbox{
font-size:80%;
color:#464545
}
Berikut Kode HTML nya:
<div class="login">
<form method="post" action="login.php">
<input type="text" name="email" placeholder="No HP atau Email"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="checkbox"><small class="checkbox">ingat saya</small>
<input type="submit" name="kirim" value="Kirim">
</form>
</div>
Untuk Demo silahkan lihat pada tautan dibawah ini
DEMO FORML LOGIN DI TENGAH LAYAR
Maka kode secara keseluruhan seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>FORM LOGIN HTML CSS</title>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<style type="text/css">
.login {
margin: 250px auto;
border: 1px solid #ccc;
padding: 10px 30px;
background: lightblue;
width: 400px;
}
input[type=text], input[type=password] {
width: 100%;
margin: 5px auto;
padding: 10px;
}
input[type=submit] {
margin: 5px auto;
cursor: pointer;
background: #008992;
color: #fff;
border: 1px solid #fff;
width: 90px;
padding: 5px;
float: right;
}
.checkbox{
font-size: 80%;
color: #464545
}
</style>
</head>
<body>
<div class="login">
<form method="post" action="login.php">
<input type="text" name="email" placeholder="No HP atau Email"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="checkbox"><small class="checkbox">ingat saya</small>
<input type="submit" name="kirim" value="Kirim">
</form>
</div>
</body>
Agar bekerja sesuaikan login.php nya.
Sekian cara membuat form login dengan menggunakan HTML dan CSS.