PWEB : JavaScript
Tugas Membuat Sign Up Form dan Login Form
Pada pertemuan ketiga, kami diberi tugas untuk membuat sign up form dan login form menggunakan HTML dan JavaScript.
Berikut adalah dokumentasi dari sign up form,
.png)
Source Code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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" 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("p1").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").value.length > 12){ | |
| alert("Password maximum length is 12"); | |
| }else if(document.getElementById("p1").value.length < 6){ | |
| alert("Password minimun length is 6"); | |
| }else{ | |
| alert("Your account has been created succesfully... Redirecting to JavaTpoint.com"); | |
| window.location="https://www.javatpoint.com/"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Berikut adalah dokumentasi dari login page,
.png)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title> Login Form </title> | |
| </head> | |
| <body align="center"> | |
| <h1> LOGIN </h1> | |
| <table cellspacing="2" align="center" cellpadding="8" border="0"> | |
| <tr><td> Username </td> | |
| <td><input type="text" placeholder="Enter your username" id="n1"> | |
| </td></tr> | |
| <tr><td> Password </td> | |
| <td><input type="text" placeholder="Enter your password" id="e1"> | |
| </td></tr> | |
| <tr><td> | |
| <input type="submit" value="Login" onClick="login()"/> | |
| </td></tr> | |
| </table> | |
| <script type="text/javascript"> | |
| function submit_form(){ | |
| alert("Login successfully"); | |
| } | |
| function create(){ | |
| window.location = "login.html"; | |
| } | |
| </script> | |
| </body> |
5025201272
PWEB C
2022/2023
Comments
Post a Comment