Tugas 3 Pemrograman Web C: Membuat Form

September 14, 2022

index.html:

1:  <!DOCTYPE html>  
2:  <html lang="en">  
3:  <head>  
4:    <meta charset="UTF-8">  
5:    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
6:    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
7:    <title>Document</title>  
8:    <link rel="stylesheet" href="index.css">  
9:  </head>  
10:  <body>  
11:    <h3> LOGIN </h3>  
12:    <form id='Login_form' onsubmit="submit_form()">  
13:      <h4> USERNAME </h4>  
14:      <input type="text" placeholder="Enter your email id"/>  
15:      <h4> PASSWORD </h4>  
16:      <input type="password" placeholder="Enter your password" /></br></br>  
17:      <input type="submit" value="Login" />  
18:      <input type="button" value="SignUp" onclick="create()" />  
19:    </form>  
20:    <script type="text/javascript">  
21:      function submit_form() {  
22:        alert("Login Successfully");  
23:      }  
24:      function create() {  
25:        window.location = "signup.html";  
26:      }  
27:    </script>  
28:  </body>  
29:  </html>

signup.html:

1:  <!DOCTYPE html>  
2:  <html lang="en">  
3:  <head>  
4:    <meta charset="UTF-8">  
5:    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
6:    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
7:    <title>Document</title>  
8:  </head>  
9:  <body align="center" >  
10:    <h1> CREATE YOUR ACCOUNT </h1>  
11:    <table cellspacing="2" align="center" cellpadding="8" border="0">  
12:      <tr>  
13:        <td> Name</td>  
14:        <td> <input id="n1" type="text" placeholder="Enter your name" /></td>  
15:      </tr>  
16:      <tr>  
17:        <td>Email </td>  
18:        <td> <input id="e1" type="text" placeholder="Enter your email id" /></td>  
19:      </tr>  
20:      <tr>  
21:        <td> Set Password</td>  
22:        <td> <input id="p1" type="password" placeholder="Set a password" /></td>  
23:      </tr>  
24:      <tr>  
25:        <td>Confirm Password</td>  
26:        <td> <input id="p2" type="password" placeholder="Confirm your password" /></td>  
27:      </tr>  
28:      <tr>  
29:        <td> <input type="submit" value="Create" onClick="create_account()" /></td>  
30:      </tr>  
31:    </table>  
32:    <script type="text/javascript">  
33:      function create_account() {  
34:        var n = document.getElementById("n1").value;  
35:        var e = document.getElementById("e1").value;  
36:        var p = document.getElementById("p1").value;  
37:        var cp = document.getElementById("p2").value;  
38:        var letters = /^[A-Za-z]+$/;  
39:        var email_val = /^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+([a-zA-Z0-9](2,4)))+$/;  
40:        if(n==''||e==''||p==''||cp==''){  
41:          alert("Masukkan tiap data secara benar");  
42:        }  
43:        else if(!letters.test(n)){  
44:          alert("Nama salah, harus mengandung huruf alfabet");  
45:        }  
46:        else if(p!=cp){  
47:          alert("Kata Sandi tidak cocok!");  
48:        }  
49:        else if(document.getElementById("p1").value.length > 12){  
50:          alert("Batas maksimum Kata Sandi sepanjang 12 karakter");  
51:        }  
52:        else if(document.getElementById("p1").value.length < 6){  
53:          alert("Minimum Kata Sandi sepanjang 6 karakter");  
54:        }  
55:        else{  
56:          alert("Akun Anda berhasil dibuat... ");  
57:          window.location = "https://www.javatpoint.com/";  
58:        }  
59:      }  
60:    </script>  
61:  </body>  
62:  </html>

Link Repository: https://github.com/brianakbar/Tugas3_PWebC_MembuatForm

Link Website: https://brianakbar.github.io/Tugas3_PWebC_MembuatForm/

Screenshot: