Membuat Halaman login

September 24, 2022

Tugas Pemrograman Web minggu ini adalah membuat halaman login menggunakan javascript.

Source code Register:

        Copy
        <!DOCTYPE html>
<html lang="en">
    <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>SignUp Form</title>
<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="e.g. John Smith"
                id="n1">
        </td>
    <tr><td>Email</td>
        <td><input type="text" placeholder="e.g johnsmith@example.com"
            id="e1">
        </td>
    <tr><td>Set Password</td>
        <td><input type="password" placeholder="your password contains 6-12 characters"
            id="p1">
        </td>
    <tr><td>Confirm Password</td>
        <td><input type="password" placeholder="Confirm your password..."
            id="p2">
        </td>
    <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==''||p2==''){
                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');
            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!");
                window.location="login.html";
        </script>

      

view raw Tugas3/register.html delivered with ❤ by emgithub

Source code Login:

        Copy
        <!DOCTYPE html>
<html lang="en">
    <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>
    <h3> LOGIN </h3>
    <formform="Login_form" onsubmit="submit_form()"></formform>
    <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()" />
    <script type="text/javascript">
        function submit_form(){
            alert("Login Successfully");
        function create(){
            window.location = "register.html";
    </script>

      

view raw Tugas3/login.html delivered with ❤ by emgithub

Screenshot webpage:

Search This Blog

Gumilang Silalahi College Blog

Membuat Halaman login

Comments

Post a Comment

Popular posts from this blog

PBKK UWP

ETS Pemrograman Web

Final Project PBKK

	<!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>SignUp Form</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="e.g. John Smith"
	id="n1">
	</td>
	</tr>
	<tr><td>Email</td>
	<td><input type="text" placeholder="e.g johnsmith@example.com"
	id="e1">
	</td>
	</tr>
	<tr><td>Set Password</td>
	<td><input type="password" placeholder="your password contains 6-12 characters"
	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==''\|\|p2==''){
	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');
	}
	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!");
	window.location="login.html";
	}
	}
	</script>


	</body>
	</html>