Dari pada berlama-lama, sihlakan simak tutorialnya berikut ini.
Langkah Pertama
Buatlah Dokumen Baru ber ektensi HTML.
Kemudian Buwt lah kode html berikut ini.
<html>
<head>
<title>Login Page</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Setelah itu Kita membuat sebuah Table form login nya. Copy kan kode berikut ini.
<form name="loginForm" method="post" action="dashboard.php">
<table width="40%" align="center">
<tr>
<td colspan="2" align="center" class="td2"><h2>LOGIN ADMIN</h2></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" size="35" name="userid" placeholder="Fill in the username here!"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="Password" size="35" name="pwd" placeholder="fill in the password here!"></td>
</tr>
<tr>
<td class="td5" colspan="2">
<center>
<button class="login" style="width:120px;align:center;height:40px;" type="submit" onclick="return check(this.form)" value="Login">Login <i class="fa fa-sign-in"></i></button></td>
</center>
</tr>
<tr>
<td colspan="2"><center><font color="#FFF" size="3">Copyright © 2020</font><font color="#007A98"> EAGLEcodes</font></center></td>
</tr>
</table>
</form>Letakkan kode diatas dibawah tag <body>.
Baca Juga: CARA DISABLE CTRL+C DENGAN MENGGUNAKAN JAVASCRIPTLangkah Ketiga
Kemudian Kita Tambahkan style CSS Nya.copy saja kode CSS nya dibawah ini.
table{
background:#CFBB1B;
border:3px solid #DBDBDB;
border-radius:5px;
}
.td2{
border-bottom:3px solid #DBDBDB;
color:#FFF;
}
.login{
border:2px solid #DBDBDB;
padding-top:5px;
font-family: "Baloo 2", cursive;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
background: #109799;
font-size:19px;
color:#FFF;
cursor:pointer;
}
.login:hover{
background:#007A98;
color:#B5A103;
transition: .2s ease-in;
}
td{
color:#FFF;
font-family: "Baloo 2", cursive;
}
.td5{
padding-bottom:10px;
}
input[type="text"], [type="password"]{
background:transparent;
color:#109799;
border:1px solid #FFF;
padding:8px 1px;
}
input[type="text"]:hover{
color:#FFF;
}
input[type="password"]:hover{
color:#AA1B09;
}
::placeholder{
color:#FFF;
}Letakkan kode CSS diatas ini dibawah tag <style type="text/css">.
Langkah Ke-Empat
Selanjutnya Kita Menambahkan Kode JavaScript Nya.
Berikut kode JavaScriptnya.
<script language="javascript">
function check(form){
if(form.userid.value == "admin" && form.pwd.value == "eaglecodes"){
return true;
} else {
alert("Username Atau Password Salah!")
return false;
}
}
</script>Copy kode JavaScript Diatas Kemudian Pastekan Dibawah Tag </head>.
Perhatikan text yang berwarna biru tersebut, text yang bertulis kata "admin", sebagai Userid Dan kata "eaglecodes", sebagai Password nya. Sihlakan Ganti sesuai keinginan kalian.
Baca Juga: Cara Membuat Syntax Highlighting Di BloggerLangkah Kelima
Kemudian Salin Beberapa Link Rel Stylesheet Berikut ini.
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon|Viga|Yanone+Kaffeesatz|Nunito|Baloo+2" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
Letakkan Kode ini dibawah tag <title>Login Page</title>.
Selesai
Save file HTML nya Kemudian Coba Jalankan Di Browser kalian, Maka Tampilannya Akan Seperti Ini.
Mungkin itu saja Yang Bisa Saya Berrikan Pada Artikel Kali Ini, Semoga Membantu.
Jika ada pertanyaan Atau Ada Yang binggung tentang tutorial ini, Bisa Koment Dibawah. Baca Juga: CARA MEMBUAT TEXT MENGETIK SENDIRI DENGAN JAVASCRIPT
Jika ada pertanyaan Atau Ada Yang binggung tentang tutorial ini, Bisa Koment Dibawah. Baca Juga: CARA MEMBUAT TEXT MENGETIK SENDIRI DENGAN JAVASCRIPT