html css php login code example

Example 1: how to make a working login system using code

<!DOCTYPE html>
<html>
<head>
	<title>Login</title>
	<script>
  firebase.initializeApp(firebaseConfig);
  const auth = firebase.auth();
  function signUp(){
    var email = document.getElementById("email");
    var password = document.getElementById("password");
    const promise = auth.createUserWithEmailAndPassword(email.value, password.value);
    promise.catch(e => alert(e.message));
    alert("Signed Up");
  }
  function signIn(){
    var email = document.getElementById("email");
    var password = document.getElementById("password");
    const promise = auth.signInWithEmailAndPassword(email.value, password.value);
    promise.catch(e => alert(e.message));
  }
  function signOut(){
    auth.signOut();
    alert("Signed Out");
  }

auth.onAuthStateChanged(function(user){
    if(user){
      var email = user.email;
      alert("Signed in as " + email);
      //Take user to a different or home page

      //is signed in
    }else{
      alert("No Active User");
      //no user is signed in
    }
  });g
	</script>
<style type="text/css">
	body{
	background-color: #55d6aa;
}
h1{
	background-color: #ff4d4d;
	margin: 10px auto;
	text-align: center;
	color: white;
}
#formContainer{
	background-color: white;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

	width: 25%;
	height: 45;
	margin: 10px auto;
}
#header{
	width: 100%;
	height: 10px;
	background: black;
}
#email{
	width: 70%;
	height: 40px;
	display:block;
	margin: 25px auto;
	border: none;
	outline: none;
	border-bottom: 2px solid black;
}
#password{
	width: 70%;
	height: 40px;
	display: block;
	margin: 10px auto;
	border: none;
	outline: none;
	border-bottom: 2px solid black;
}
#signUp{
	background-color: #ff4d4d;
	color: white;
	border: none;
	font-weight: bold;
	padding: 15px 32px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	margin-top: 20px;
	margin-left: 50px;
}
#signIn{
	background-color: #32ff7e;
	color: white;
	font-weight: bold;
	border: none;
	padding: 15px 35px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 13px
}
#signOut{
	background-color: #FFA500;
	color: white;
	border: none;
	padding: 12px 32px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	margin-top: 9px;
	margin-left: 74px;
	font-weight: bold;
}
button: hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 7px 50px 0 rgba(0,0,0,0,.19);
}
</style>
</head>
<body>
	<h1>Login Here</h1>
	<div id="formContainer">
		<div id="header"> </div>
  <input type="email" placeholder="Email" id="email">
  <input type="password" placeholder="Password" id="password">

 <button onclick="signUp()" id="signUp"> Sign Up </button>
  <button onclick="signIn()" id="signIn"> Sign In </button>
  <button onclick="signOut()" id="signOut"> Sign Out </button>
Continue</a>
</body>
</html>

Example 2: html login scripts

<form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

Tags:

Python Example

Recent Posts