Pemrograman Web B Latihan Pertemuan 3 : Membuat SignUp Form
Membuat Login dan SignUp Form dengan JS
Andhika Ditya Bagaskara D.
5025201096
Latihan pertemuan ke-3 membuat login dan sign up form menggunakan HTML dan JS
Tampilan:
.png)
.png)
.png)
.png)
.png)
.png)
Source code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
</head>
<body>
<h1>LOGIN</h1>
<form onsubmit="submit_form()">
<h4>USERNAME</h4>
<input type="text" placeholder="Enter your email id"/>
<h4>PASSWORD</h4>
<input type="password" placeholder="Enter your password" />
<br><br>
<input type="submit" value="Login">
<input type="button" value="SignUp" onclick="create()" />
</form>
<script type="text/javascript">
function submit_form(){
alert("Login successfully");
}
function create(){
window.location = "signup.html"
}
</script>
</body>
</html>
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</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" id="e1"></td>
</tr>
<tr>
<td>Set 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" value="Create" 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]{2,4})+$/;
if(n==''||e==''||p==''||cp==''){
alert("Enter each details correctly");
}
else if(!letters.test(n)){
alert('Name is incorrect! Must contain alphabets');
}
else if(!email_val.test(e)){
alert('Invalid email format! Please enter valid email');
}
else if(p!=cp){
alert("Passwords 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>
.png)
.png)
Komentar
Posting Komentar