Latihan Pertemuan 4 : Javascript
Natya Madya Marciola
5025201238
Pemrograman Web A
Pada pertemuan 4 ini, kami diberi tugas untuk membuat latihan membuat halaman login dan sign in.
Sign In
Kode
<html>
<head>
<title>SignUp Page</title>
</head>
<body align="center">
<h1>CREATE YOUR ACCOUNT</h1>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>Name</td>
<td><input type="text" placeholder="Enter your name" id="n1"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" placeholder="Enter your email" id="e1"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" placeholder="Set a password" id="p1"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" placeholder="Confirm your password" id="p2"></td>
</tr>
<tr>
<td><input type="submit" placeholder="Create Account" onclick="create_account()"></td>
</tr>
</table>
<script type="text/javascript">
function create_account(){
var n = document.getElementById("n1").value;
var e = document.getElementById("e1").value;
var p = document.getElementById("p1").value;
var cp = document.getElementById("p2").value;
var letters = /^[A-Za-z]+$/;
var email_val = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(n=='' || e=='' || p=='' || cp==''){
alert("Enter each detail correctly");
}
else if(!letters.test(n)){
alert("Name must contain alphabets only");
}
else if(!email_val.test(e)){
alert("Invalid email format");
}
else if(p!=cp){
alert("Password not matching");
}
else if(document.getElementById("p1").value.length > 12){
alert("Password maximum length is 12");
}
else if(document.getElementById("p1").value.length < 6){
alert("Password minimum length is 6");
}
else{
alert("Your account has been created successfully... Redirecting to JavaTpoint.com");
window.location="https://www.javatpoint.com/";
}
}
</script>
</body>
</html>
Login
Kode
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h3>LOGIN</h3>
<form form="Login_from" onsubmit="submit_form()"/>
<h4>Username</h4>
<input type="text" placeholder="Enter your email"/>
<h4>Password</h4>
<input type="password" placeholder="Enter your password"/><br><br>
<input type="submit" value="Login"/>
<input type="button" value="Sign Up" onClick="create()"/>
</form>
<script type="text/javascript">
function submit_form(){
alert("Login successfully");
}
function create(){
window.location = "signup.html";
}
</script>
</body>
</html>
Link Repository : Repository
Komentar
Posting Komentar