Pertemuan 3 Javascript
Berikut ini adalah contoh pengimplementasian javascript di html, dimana akan dibuat login dan signup form.
style.css
Untuk source codenya, saya menggunakan tag input text, password, submit, dan button.
Pengimplementasian javascript bisa menggunakan tag script, dan disini saya memakai javascript untuk memberikan alert sukses login jika form disubmit, dan membuat halaman html signup jika button signup dipencet.
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 Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Login</h3>
<form="Login_form" onsubmit="submit_form()">
<h4>Username</h4>
<input type="text" placeholder="Enter your Username"/>
<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 successful");
}
function create(){
window.location = "signup.html";
}
</script>
</body>
</html>
signup.html
<html>
<head>
<title> Sign Up Page </title>
<link rel="stylesheet" href="style.css">
</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()">
</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 length is 12");
}
else if(document.getElementById("p1").values.lenght < 6){
alert("Password minimum length is 6");
}
else{
alert("Your account has been created successfully... Rediracting to JavaTPoint.com");
window.location="https://www.javatpoint.com/";
}
}
</script>
</body>
</html>
style.css
body{
background-color: #a0e4ff;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgba(0, 32, 211, 0.667);
}
input{
color: rgba(0, 32, 211, 0.667);
font-size: large;
font-weight: bold;
}
Link Repository Github: Poodoop/signupform (github.com)
Link Website: Login Form (poodoop.github.io)
Komentar
Posting Komentar