Desain Login menggunakan HTML
1. HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style form-login.css"></link>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<script>
function Login(){
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="rizal" && password=="171")
{
alert("Congratulation, Log In Success");
document.location='form-input.html'
}
else{
alert("Username atau password yang anda masukkan salah !");
}
}
</script>
</head>
<body style="background-color:#D1E0E0">
<form name="login"><br><br><br><br><br><br>
<center>
<div class="container">
<img src="login icon.png" width="150" height="150">
<table cellpadding="6" width="225">
<tbody>
<p> </p>
<div class="form-input">
<input name="username" placeholder="Enter Username" type="text">
</div>
<div class="form-input">
<input name="password" placeholder="Enter Password" type="password">
</div>
<tr>
<input value="LOGIN" onclick="Login()" type="button" class="btn-login"></td>
<br>
<a href="#">Forget Password?</a>
</tr>
</tbody></table></div>
</tbody></table></center></form></body></html>
kemudian simpan file dengan nama (index.html)
2. CSS
.container{
width: 500px;
height: 400px;
text-align: center;
background-color: rgba(52, 73, 94,0.7);
border-radius: 4px;
margin: auto;
margin-top: 15px;
}
.container img{
width: 150px;
height: 150px;
margin-top: -60px;
margin-bottom: 30px;
}
input[type="text"],input[type="password"] {
height: 45px;
width: 300px;
font-size: 18px;
border: none;
margin-bottom: 20px;
border-radius: 4px;
background-color: #fff;
padding-left: 30px;
}
.btn-login{
padding: 10px 30px;
color: #fff;
border-radius: 4px;
border: none;
background-color: #2ECC71;
border-bottom: 4px solid #27AE60;
margin-bottom: 20px;
}
a{
color: #fff;
}
simpan file dengan nama (style form-login.css)
Tampilan
<html>
<head>
<link rel="stylesheet" type="text/css" href="style form-login.css"></link>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<script>
function Login(){
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="rizal" && password=="171")
{
alert("Congratulation, Log In Success");
document.location='form-input.html'
}
else{
alert("Username atau password yang anda masukkan salah !");
}
}
</script>
</head>
<body style="background-color:#D1E0E0">
<form name="login"><br><br><br><br><br><br>
<center>
<div class="container">
<img src="login icon.png" width="150" height="150">
<table cellpadding="6" width="225">
<tbody>
<p> </p>
<div class="form-input">
<input name="username" placeholder="Enter Username" type="text">
</div>
<div class="form-input">
<input name="password" placeholder="Enter Password" type="password">
</div>
<tr>
<input value="LOGIN" onclick="Login()" type="button" class="btn-login"></td>
<br>
<a href="#">Forget Password?</a>
</tr>
</tbody></table></div>
</tbody></table></center></form></body></html>
kemudian simpan file dengan nama (index.html)
2. CSS
.container{
width: 500px;
height: 400px;
text-align: center;
background-color: rgba(52, 73, 94,0.7);
border-radius: 4px;
margin: auto;
margin-top: 15px;
}
.container img{
width: 150px;
height: 150px;
margin-top: -60px;
margin-bottom: 30px;
}
input[type="text"],input[type="password"] {
height: 45px;
width: 300px;
font-size: 18px;
border: none;
margin-bottom: 20px;
border-radius: 4px;
background-color: #fff;
padding-left: 30px;
}
.btn-login{
padding: 10px 30px;
color: #fff;
border-radius: 4px;
border: none;
background-color: #2ECC71;
border-bottom: 4px solid #27AE60;
margin-bottom: 20px;
}
a{
color: #fff;
}
simpan file dengan nama (style form-login.css)
Tampilan
Komentar
Posting Komentar