Tugas Membuat Submit Form
Nama : Khariza Azmi Alfajira Hisyam
NRP : 5025201044
Kelas : Pemrograman Web A
1. Membuat Form Login
Source code : login.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>Document</title>
</head>
<body>
<h3>LOGIN FORM</h3>
<form action="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" 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>
2. Membuat Form Sign Up
a. Ketika nama yang dimasukkan mengandung karakter selain huruf
b. Ketika email yang dimasukkan tidak sesuai format
c. Ketika password yang dimasukkan kurang dari 6 karekter
d. Ketika password yang dimasukkan lebih dari 12 karakter
e. Ketika password yang dimasukkan tidak cocok dengan password konfirmasi
f. Ketika berhasil membuat akun
Source Code : 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 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" 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 corectly');
} 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').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... Redirectering to JavaTpoint.com');
window.location = 'https://www.javatpoint.com/';
}
}
</script>
</body>
</html>
Komentar
Posting Komentar