Pada postingan saya kali ini saya ingin membagikan beberapa script untuk membuat tampilan login form sederhana. Script login form yang saya bagikan kali ini tidak terhubung ke database, melainkan hanya divalidasi menggunakan JavaScript dan jika memang username dan passwordnya benar maka akan dialihkan ke suatu halaman.
Untuk hasilnya akan terlihat seperti berikut...
Untuk scriptnya adalah sebagai berikut...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat Login JavaScript</title>
<style type="text/css">
body{
background: linear-gradient(to right, lightgreen, white);
}
.login{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 500px;
background: green;
}
.login input[type="text"], input[type="password"]{
margin-left: 34px;
width: 250px;
height: 40px;
margin-top: 20px;
background: none;
outline: none;
border: none;
border-bottom: 1px solid purple;
color: #ffffff;
}
.login button{
margin-left: 34px;
width: 250px;
height: 30px;
outline: none;
background: lightgreen;
border: 1px solid purple;
margin-top: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="login javascript">
<input type="text" name="" placeholder="masukkan username" id="username">
<input type="password" name="" placeholder="masukkan password" id="password">
<button type="button" id="masuk">masuk</button>
</div>
<script type="text/javascript">
const masuk = document.getElementById('masuk');
masuk.addEventListener('click', function(){
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'digitalicproject' && password === 'belajarlogin') {
location.href = 'berhasilmasuk.html';
} else{
alert('yang anda masukkan salah!');
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat Login JavaScript</title>
<style type="text/css">
body{
background: linear-gradient(to right, lightgreen, white);
}
.login{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 500px;
background: green;
}
.login input[type="text"], input[type="password"]{
margin-left: 34px;
width: 250px;
height: 40px;
margin-top: 20px;
background: none;
outline: none;
border: none;
border-bottom: 1px solid purple;
color: #ffffff;
}
.login button{
margin-left: 34px;
width: 250px;
height: 30px;
outline: none;
background: lightgreen;
border: 1px solid purple;
margin-top: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="login javascript">
<input type="text" name="" placeholder="masukkan username" id="username">
<input type="password" name="" placeholder="masukkan password" id="password">
<button type="button" id="masuk">masuk</button>
</div>
<script type="text/javascript">
const masuk = document.getElementById('masuk');
masuk.addEventListener('click', function(){
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'digitalicproject' && password === 'belajarlogin') {
location.href = 'berhasilmasuk.html';
} else{
alert('yang anda masukkan salah!');
}
})
</script>
</body>
</html>
Untuk halaman yang kita tuju jika berhasil masuk...
<!DOCTYPE html>
<html>
<head>
<title>Berhasil Masuk</title>
<style type="text/css">
.selamat{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="selamat">
<h1>Selamat Anda Berhasil Masuk:-)</h1>
<h2>Jangan Lupa Like dan Subscribe:-D</h2>
</div>
</body>
</html>
<html>
<head>
<title>Berhasil Masuk</title>
<style type="text/css">
.selamat{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="selamat">
<h1>Selamat Anda Berhasil Masuk:-)</h1>
<h2>Jangan Lupa Like dan Subscribe:-D</h2>
</div>
</body>
</html>
Sekian artikel dari saya dan terima kasih:-)
0 Komentar