TUGAS 3 PWEB - Sign up & Login Form
TUGAS 3 PWEB - Sign up & Login Form
Muhammad Raihan Athallah
5025201206
Kelas PWEB B
Pada pertemuan kali ini membahas mengenai javascript dan untuk latihannya diminta membuat sebuah login dan sign up form.\
screenshoot tampilan
source code:
login.html
<!DOCTYPE html>
<head>
<title> Login Form </title>
</head>
<body>
<h3> LOGIN </h3>
<formform="Login_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" values="Login" />
<input type="button" values="SignUp" onClick="create()" />
</formform>
<script type="text/javascript">
function submit_form(){
alert("Login successfully");
}
function create(){
window.location = "signup.html";
}
</script>
</body>
signup.html
<html>
<head>
<title>SignUp Page</title>
</head>
<body align="center">
<h1>CREATE YOUR ACCOUNT</h1>
<table cellspascing="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="p1" /></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 only");
} else if (!email_val.test(e)) {
alert("Invalid email format please enter valid email id");
} else if (p != cp) {
alert("Password not matching");
} else if (document.getElementById("p1").values.lenght > 12) {
alert("Password maximum lenght is 12");
} else if (document.getElementById("p1").values.lenght < 6) {
alert("Password minimum lenght is 6");
} else {
alert("Your account has been created successfully... Rediracting to JavaTPoint.com");
window.location = "https://www.javapoints.com/";
}
}
</script>
</body>
</html>
Komentar
Posting Komentar