Tugas 3 Pemrograman Web - Membuat Form Login dan Signup
Nama: Selfira Ayu Sheehan
NRP: 5025201174
Kelas: Pemrograman Web A
Penugasan membuat form login dan signup
Link Repository: Click Here
This file contains hidden or 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> | |
| <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>Log-In Form</title> | |
| </head> | |
| <body> | |
| <h3> LOG IN</h3> | |
| <formform="Login_form" onsubmit="submit_form()" {"> | |
| <h4>Username</h4> | |
| <input type="text" placeholder="Enter your email"/> | |
| <h4>Password</h4> | |
| <input type="password" placeholder="Enter your password"/> | |
| <input type="submit" value="Log in" onclick="submit_form()"/> | |
| <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> |
This file contains hidden or 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> | |
| <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="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{ | |
| alert("Your account has been created succesfully. Redirecting to JavaTpoint.com"); | |
| window.location="https://www.javatpoint.com/"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Comments
Post a Comment