Skip to main content

Cara Membuat Form Login Berbasis HTML

Kali ini mimin bakal share sebuah tutorial bagaimana cara membuat form login Berbasis HTML.
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>
Langkah Kedua
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 &copy; 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 JAVASCRIPT
Langkah 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 Blogger
Langkah 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
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Text Mengetik Sendiri Dengan JavaScript

Hai sobat codes, kali ini mimin bakal share sebuah tutorial bagaimana Cara Membuat Text Seakan Mengetik sendiri dengan Menggunakan JavaScript. Buatlah Sebuah File Baru dengan extensi HTML. Contoh : mengetik.html Kemudian Untuk Langkah-Langkah nya Sihlakan Ikuti Sesuai langkah-langkah Berikut ini, Perhatikan dengan baik-baik! Langkah Pertama Copy Script HTML dibawah Ini, pastekan Ke file baru yang telah sobat Buat. <!DOCTYPE html> <html> <head> <title>Text Sedang Mengetik...</title> </head> <body> </body> </html> Baca Juga:  Cara Membuat Text Berkedip Dengan JavaScript Langkah Kedua Kemudian, copykan kode JavaScript berikut ini. <script type="text/javascript"> TypingText = function(element, interval, cursor, finishedCallback) {   if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {     this.running = true;     return;   }   this....
Post a Comment
Baca Lebih Lanjut »

Cara Membuat Text Berkedip Dengan JavaScript

Hai sobat codes , kali ini mimin Bakal Share Sebuah Tutorial Bagaimana Sih Caranya Membuat Sebuah Text Berkedap Kedip Hanya Dengan Menggunakan JavaScript, Untuk Memulai Membuat Text Berkedap Kedip, Buat Lah Sebuah File Baru Dengan Nama Sesuai Keinginan kalian. Berikan extensi file tersebut dengan extensi HTML. Contoh : berkedip.html Langkah Pertama Copykan Code HTML berikut ke file yang telah Kalian Buat. <!DOCTYPE html> <html> <head> <title>Contoh Text Berkedip</title> </head> <body> </body> </html> Langkah Kedua Kemudian, Tambahkan Kode JavaScript Berikut ini. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script> setInterval(function(){      $(".kedip").toggle(); },400); </script> Letakkan dibawah tag <body> . Baca Juga:  Cara Redirect Halaman Web Menggunakan JavaScript Langkah Ketiga Untuk Membuat Text nya menjad...
Post a Comment
Baca Lebih Lanjut »

Deface Metode Responsive Filemanager

Deface Metode Responsive Filemanager Sesuai dengan judulnya kali ini Mimin Bakal Share Tutorialnya kali ini.
Baca Lebih Lanjut »