Assalamualaikum Warahmatullahi Wabarakatuh.
Hai, kali ini saya akan memberikan tutorial yaitu "Cara membuat form login sederhana menggunakan HTML dan Java Script."
Sudah pada tau kan? Apa itu HTML dan Java Script, sudah pada tau lah pastinya.
Oke, langsung saja kita mulai tutorialnya:
Sebelum kita membuat scriptnya, lebih baik kita melihat hasil yang akan kita buat nanti. Biar ada semangatnya, hehe.
Berikut ini hasilnya:
Ini Layout 1 :
Ini Layout 2 :
Gimana? Keren dan sederhana kan? kalo gitu kita langsung saja dengan scriptnya.
Masukkan script ini di notepad
Ini script layout 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login form</title>
</head>
<meta charset="UTF-8">
<body background="C:\Users\User. M\Downloads\Images\death note l 1680x1050 wallpaper_www.wallpaperhi.com_34.jpg">
<script type="text/javascript">
function userLogin() {
var myForm = document.login;
if(myForm.username.value == "deni" && myForm.pass.value == "Dharmawan")
window.location.href= "Login_berhasil.html";
else if
(myForm.username.value != "deni" && myForm.pass.value == "Dharmawan")
alert("Username anda salah")
else if
(myForm.username.value == "deni" && myForm.pass.value !="Dharmawan")
alert("Password anda salah")
else if
(myForm.username.value=="" && myForm.pass.value =="")
alert("Username dan password yang dimasukkan kosong")
else
alert("Username dan Password yang dimasukkan salah");
}
</script>
<center>
<img src="C:\Users\User. M\Downloads\Images\death note.jpg" width="15%" height="15%">
<h3><font color="orange" size="5">Login</font></h3>
<fieldset>
<form action="" name="login">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="button" onClick="userLogin()" value="Login">
<div class="border-p"></div>
</form>
</fieldset>
</div>
<tr>
<font color="white" size="6"</font>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<td width="350" heigth="150" colspan="2" align="center"><pre>©Copyright Deni Dharmawan</pre></td>
</tr>
</table>
</body>
</html>
Untuk java script bisa diganti password dan username terserah anda dan background serta gambarnya pun juga bisa diganti.
Setelah itu save scriptnya, lalu kita membuat script untuk layout 2 pada file yang baru
Berikut scriptnya :
<!DOCTYPE html>
<head>
<title>Login</title>
</head>
<body>
<body bgcolor="000000">
<center>
<p>|</p>
<p>|</p>
<marquee behavior="alternate" style="border:RED 2px SOLID;>
<align="center" colspan="2" width="100%" height="10%"><font size="6" color="orange" font face="algerian">Selamat Login Berhasil</marquee>
<center>
<img src="C:\Users\User. M\Downloads\Images\Kumpulan-Animasi-Bergerak2.gif">
<p>|</p>
<p>|</p>
<marquee direction="right" style="border:RED 2px SOLID;>
<align="center" colspan="2" width="100%" height="10%"><font size="6" color="orange" font face="algerian">Selamat Login Berhasil</marquee
</body>
</html>
Sama dengan layout 1, background dan gambarnya bisa diganti terserah anda.
Setelah itu save scriptnya, lalu kedua script itu diletakkan ke dalam satu folder.
Semoga tutorial membuat Form login sederhana menggunakan HTML dan Javascript ini bisa bermanfaat.
Selesai.
Terima kasih telah berkunjung.
Wassalamualaikum Warahmatullahi Wabarakatuh.
Read more ...
Hai, kali ini saya akan memberikan tutorial yaitu "Cara membuat form login sederhana menggunakan HTML dan Java Script."
Sudah pada tau kan? Apa itu HTML dan Java Script, sudah pada tau lah pastinya.
Oke, langsung saja kita mulai tutorialnya:
Sebelum kita membuat scriptnya, lebih baik kita melihat hasil yang akan kita buat nanti. Biar ada semangatnya, hehe.
Berikut ini hasilnya:
Ini Layout 1 :
Ini Layout 2 :
Gimana? Keren dan sederhana kan? kalo gitu kita langsung saja dengan scriptnya.
Masukkan script ini di notepad
Ini script layout 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login form</title>
</head>
<meta charset="UTF-8">
<body background="C:\Users\User. M\Downloads\Images\death note l 1680x1050 wallpaper_www.wallpaperhi.com_34.jpg">
<script type="text/javascript">
function userLogin() {
var myForm = document.login;
if(myForm.username.value == "deni" && myForm.pass.value == "Dharmawan")
window.location.href= "Login_berhasil.html";
else if
(myForm.username.value != "deni" && myForm.pass.value == "Dharmawan")
alert("Username anda salah")
else if
(myForm.username.value == "deni" && myForm.pass.value !="Dharmawan")
alert("Password anda salah")
else if
(myForm.username.value=="" && myForm.pass.value =="")
alert("Username dan password yang dimasukkan kosong")
else
alert("Username dan Password yang dimasukkan salah");
}
</script>
<center>
<img src="C:\Users\User. M\Downloads\Images\death note.jpg" width="15%" height="15%">
<h3><font color="orange" size="5">Login</font></h3>
<fieldset>
<form action="" name="login">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="button" onClick="userLogin()" value="Login">
<div class="border-p"></div>
</form>
</fieldset>
</div>
<tr>
<font color="white" size="6"</font>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<td width="350" heigth="150" colspan="2" align="center"><pre>©Copyright Deni Dharmawan</pre></td>
</tr>
</table>
</body>
</html>
Untuk java script bisa diganti password dan username terserah anda dan background serta gambarnya pun juga bisa diganti.
Setelah itu save scriptnya, lalu kita membuat script untuk layout 2 pada file yang baru
Berikut scriptnya :
<!DOCTYPE html>
<head>
<title>Login</title>
</head>
<body>
<body bgcolor="000000">
<center>
<p>|</p>
<p>|</p>
<marquee behavior="alternate" style="border:RED 2px SOLID;>
<align="center" colspan="2" width="100%" height="10%"><font size="6" color="orange" font face="algerian">Selamat Login Berhasil</marquee>
<center>
<img src="C:\Users\User. M\Downloads\Images\Kumpulan-Animasi-Bergerak2.gif">
<p>|</p>
<p>|</p>
<marquee direction="right" style="border:RED 2px SOLID;>
<align="center" colspan="2" width="100%" height="10%"><font size="6" color="orange" font face="algerian">Selamat Login Berhasil</marquee
</body>
</html>
Sama dengan layout 1, background dan gambarnya bisa diganti terserah anda.
Setelah itu save scriptnya, lalu kedua script itu diletakkan ke dalam satu folder.
Semoga tutorial membuat Form login sederhana menggunakan HTML dan Javascript ini bisa bermanfaat.
Selesai.
Terima kasih telah berkunjung.
Wassalamualaikum Warahmatullahi Wabarakatuh.
