form login html css code example

Example 1: how to make a html login page

<!doctype html>
<form name="loginForm" method="post" action="index.html">
<table width="20%" bgcolor="0099CC" align="center">
  <tr>
<td colspan=2><center><font size=4><b>light-net login</b></font></center></td>
</tr>

<tr>
<td>Username:</td>
<td><input type="text" size=25 name="user"></td>
</tr>

<tr>
<td>Password:</td>
<td><input type="Password" size=25 name="pass"></td>
</tr>

<tr>
<td ><input type="Reset"></td>
<td><input type="submit" onclick="return check(this.form)" value="Login"></td>
</tr>

</table>
</form>
<script language="javascript">
function check(form)
{

if(form.user.value == "public" && form.pass.value == "peasants")
{
	return true;
}
else
{
	alert("Error Password or Username")
	return false;
}
}
	      </script>

Example 2: login php template

<?php
session_start();
$errorMsg = "";
$validUser = $_SESSION["login"] === true;
if(isset($_POST["sub"])) {
  $validUser = $_POST["username"] == "admin" && $_POST["password"] == "password";
  if(!$validUser) $errorMsg = "Invalid username or password.";
  else $_SESSION["login"] = true;
}
if($validUser) {
   header("Location: /login-success.php"); die();
}
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Login</title>
</head>
<body>
  <form name="input" action="" method="post">
    <label for="username">Username:</label><input type="text" value="<?= $_POST["username"] ?>" id="username" name="username" />
    <label for="password">Password:</label><input type="password" value="" id="password" name="password" />
    <div class="error"><?= $errorMsg ?></div>
    <input type="submit" value="Home" name="sub" />
  </form>
</body>
</html>

Tags:

Php Example

Recent Posts