MACRO NEPAL
1O SIMPLE LOGIN FORM IN PHP WITH DETAIL INFORMATION
awiskar acharya
February 20, 2026
1:14 pm

Introduction

This collection demonstrates various login/signup form implementations using PHP, each with unique features and purposes. From basic authentication to social media integration, these forms showcase different security levels, user experience designs, and functionality.

Type 1: Basic Login & Signup Form

Features: Simple username/password authentication with basic validation.

<?php
// basic_login.php
session_start();
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['login'])) {
$username = trim($_POST['username']);
$password = $_POST['password'];
if ($username == 'admin' && $password == 'password123') {
$_SESSION['user'] = $username;
header('Location: dashboard.php');
exit();
} else {
$error = 'Invalid username or password';
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Basic Login Form</title>
<style>
.form-container { width: 300px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; }
input { width: 100%; padding: 8px; margin: 5px 0; }
.error { color: red; }
</style>
</head>
<body>
<div class="form-container">
<h2>Basic Login</h2>
<?php if ($error) echo "<p class='error'>$error</p>"; ?>
<form method="POST">
<input type="text" name="username" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<button type="submit" name="login">Login</button>
</form>
<p>Don't have account? <a href="basic_signup.php">Signup</a></p>
</div>
</body>
</html>
<?php
// basic_signup.php
$message = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = trim($_POST['username']);
$password = $_POST['password'];
$confirm = $_POST['confirm_password'];
if ($password == $confirm) {
$message = "Account created for $username! (Demo only)";
} else {
$message = "Passwords don't match!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Basic Signup Form</title>
<style>
.form-container { width: 300px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; }
input { width: 100%; padding: 8px; margin: 5px 0; }
.message { color: green; }
.error { color: red; }
</style>
</head>
<body>
<div class="form-container">
<h2>Basic Signup</h2>
<?php 
if ($message) {
$class = (strpos($message, 'success') !== false) ? 'message' : 'error';
echo "<p class='$class'>$message</p>";
}
?>
<form method="POST">
<input type="text" name="username" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="password" name="confirm_password" placeholder="Confirm Password" required><br>
<button type="submit">Sign Up</button>
</form>
<p>Already have account? <a href="basic_login.php">Login</a></p>
</div>
</body>
</html>

Type 2: Email-based Login with Validation

Features: Uses email instead of username, includes email format validation.

<?php
// email_login.php
session_start();
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$email = trim($_POST['email']);
$password = $_POST['password'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = 'Invalid email format';
} elseif ($email == '[email protected]' && $password == 'pass123') {
$_SESSION['email'] = $email;
header('Location: profile.php');
} else {
$error = 'Invalid credentials';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Email Login</title>
<style>
body { font-family: Arial; background: #f0f2f5; }
.login-box { width: 350px; margin: 100px auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd; border-radius: 5px; }
button { background: #1877f2; color: white; padding: 10px; border: none; width: 100%; border-radius: 5px; cursor: pointer; }
.error { color: red; font-size: 14px; }
</style>
</head>
<body>
<div class="login-box">
<h2>Login with Email</h2>
<?php if ($error) echo "<p class='error'>$error</p>"; ?>
<form method="POST">
<input type="email" name="email" placeholder="Email address" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Log In</button>
</form>
<p style="text-align:center"><a href="email_signup.php">Create new account</a></p>
</div>
</body>
</html>

Type 3: Two-Factor Authentication (2FA) Form

Features: Adds an extra security layer with verification code.

<?php
// 2fa_login.php
session_start();
$step = isset($_SESSION['2fa_step']) ? $_SESSION['2fa_step'] : 1;
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($step == 1) {
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == 'user' && $password == 'pass') {
$_SESSION['2fa_step'] = 2;
$_SESSION['temp_user'] = $username;
// In real app, send SMS/email with code
$_SESSION['2fa_code'] = rand(100000, 999999);
header('Location: 2fa_login.php');
} else {
$error = 'Invalid credentials';
}
} elseif ($step == 2) {
if ($_POST['code'] == $_SESSION['2fa_code']) {
$_SESSION['user'] = $_SESSION['temp_user'];
unset($_SESSION['2fa_step']);
unset($_SESSION['temp_user']);
unset($_SESSION['2fa_code']);
header('Location: dashboard.php');
} else {
$error = 'Invalid verification code';
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>2FA Login</title>
<style>
.container { width: 400px; margin: 100px auto; text-align: center; }
input { padding: 10px; margin: 5px; width: 80%; }
.code-box { width: 150px; text-align: center; font-size: 20px; letter-spacing: 5px; }
</style>
</head>
<body>
<div class="container">
<?php if ($step == 1): ?>
<h2>Step 1: Credentials</h2>
<?php if ($error) echo "<p style='color:red'>$error</p>"; ?>
<form method="POST">
<input type="text" name="username" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<button type="submit">Continue</button>
</form>
<?php elseif ($step == 2): ?>
<h2>Step 2: Verification Code</h2>
<p>We've sent a code to your phone/email</p>
<?php if ($error) echo "<p style='color:red'>$error</p>"; ?>
<form method="POST">
<input type="text" name="code" class="code-box" placeholder="000000" maxlength="6" required><br>
<button type="submit">Verify</button>
</form>
<?php endif; ?>
</div>
</body>
</html>

Type 4: Social Media Login Integration

Features: Login with Google, Facebook, Twitter options.

<?php
// social_login.php
session_start();
$error = '';
// Simulated OAuth responses
if (isset($_GET['provider'])) {
$provider = $_GET['provider'];
$_SESSION['user'] = "User from $provider";
header('Location: dashboard.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Social Login</title>
<style>
body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-family: Arial; }
.container { width: 400px; margin: 100px auto; background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.social-btn { display: block; width: 100%; padding: 15px; margin: 10px 0; border: none; border-radius: 5px; color: white; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none; }
.google { background: #DB4437; }
.facebook { background: #4267B2; }
.twitter { background: #1DA1F2; }
.github { background: #333; }
.divider { text-align: center; margin: 20px 0; color: #999; }
.email-login { background: #f8f9fa; color: #333; border: 1px solid #ddd; }
</style>
</head>
<body>
<div class="container">
<h2 style="text-align:center">Welcome Back</h2>
<p style="text-align:center; color:#666">Login with your social account</p>
<a href="?provider=google" class="social-btn google">Continue with Google</a>
<a href="?provider=facebook" class="social-btn facebook">Continue with Facebook</a>
<a href="?provider=twitter" class="social-btn twitter">Continue with Twitter</a>
<a href="?provider=github" class="social-btn github">Continue with GitHub</a>
<div class="divider">or</div>
<a href="basic_login.php" class="social-btn email-login">Login with Email</a>
<p style="text-align:center; margin-top:20px">
New here? <a href="social_signup.php">Sign up</a>
</p>
</div>
</body>
</html>

Type 5: Password Strength Meter Signup

Features: Real-time password strength indicator with requirements.

<?php
// password_strength_signup.php
$message = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$password = $_POST['password'];
$strength = 0;
if (strlen($password) >= 8) $strength++;
if (preg_match('/[A-Z]/', $password)) $strength++;
if (preg_match('/[a-z]/', $password)) $strength++;
if (preg_match('/[0-9]/', $password)) $strength++;
if (preg_match('/[^a-zA-Z0-9]/', $password)) $strength++;
if ($strength >= 4) {
$message = "Strong password! Account created.";
} else {
$message = "Password too weak. Please try again.";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Password Strength Signup</title>
<style>
body { font-family: 'Segoe UI', Tahoma; background: #f5f5f5; }
.container { width: 400px; margin: 50px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; }
.strength-meter { height: 5px; background: #ddd; margin: 10px 0; border-radius: 3px; }
.strength-bar { height: 100%; width: 0%; border-radius: 3px; transition: width 0.3s; }
.requirements { font-size: 12px; color: #666; margin: 10px 0; }
.req-item { margin: 5px 0; }
.req-met { color: green; }
.req-unmet { color: #999; }
</style>
</head>
<body>
<div class="container">
<h2>Create Strong Password</h2>
<?php if ($message) echo "<p style='color: " . (strpos($message, 'Strong') !== false ? 'green' : 'red') . "'>$message</p>"; ?>
<form method="POST" id="signupForm">
<input type="text" name="username" placeholder="Username" required><br>
<input type="email" name="email" placeholder="Email" required><br>
<input type="password" name="password" id="password" placeholder="Password" required><br>
<div class="strength-meter">
<div class="strength-bar" id="strengthBar"></div>
</div>
<div class="requirements">
<div class="req-item" id="req-length">✓ At least 8 characters</div>
<div class="req-item" id="req-upper">✓ At least 1 uppercase letter</div>
<div class="req-item" id="req-lower">✓ At least 1 lowercase letter</div>
<div class="req-item" id="req-number">✓ At least 1 number</div>
<div class="req-item" id="req-special">✓ At least 1 special character</div>
</div>
<button type="submit">Sign Up</button>
</form>
</div>
<script>
document.getElementById('password').addEventListener('input', function(e) {
const password = e.target.value;
let strength = 0;
const checks = {
length: password.length >= 8,
upper: /[A-Z]/.test(password),
lower: /[a-z]/.test(password),
number: /[0-9]/.test(password),
special: /[^a-zA-Z0-9]/.test(password)
};
Object.keys(checks).forEach(key => {
const element = document.getElementById(`req-${key}`);
if (checks[key]) {
element.style.color = 'green';
strength++;
} else {
element.style.color = '#999';
}
});
const bar = document.getElementById('strengthBar');
const width = (strength / 5) * 100;
bar.style.width = width + '%';
if (strength <= 2) {
bar.style.backgroundColor = 'red';
} else if (strength <= 4) {
bar.style.backgroundColor = 'orange';
} else {
bar.style.backgroundColor = 'green';
}
});
</script>
</body>
</html>

Type 6: Multi-step Registration Form

Features: Wizard-style registration with progress tracker.

<?php
// multistep_signup.php
session_start();
$step = isset($_SESSION['reg_step']) ? $_SESSION['reg_step'] : 1;
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($step == 1) {
$_SESSION['reg_data']['name'] = $_POST['name'];
$_SESSION['reg_data']['email'] = $_POST['email'];
$_SESSION['reg_step'] = 2;
header('Location: multistep_signup.php');
} elseif ($step == 2) {
$_SESSION['reg_data']['phone'] = $_POST['phone'];
$_SESSION['reg_data']['address'] = $_POST['address'];
$_SESSION['reg_step'] = 3;
header('Location: multistep_signup.php');
} elseif ($step == 3) {
$_SESSION['reg_data']['username'] = $_POST['username'];
$_SESSION['reg_data']['password'] = $_POST['password'];
$message = "Registration complete! Welcome " . $_SESSION['reg_data']['name'];
session_destroy();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Multi-step Registration</title>
<style>
.container { width: 500px; margin: 50px auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.progress-bar { display: flex; justify-content: space-between; margin-bottom: 30px; }
.step { width: 30px; height: 30px; border-radius: 50%; background: #ddd; display: flex; align-items: center; justify-content: center; color: white; }
.step.active { background: #007bff; }
.step.completed { background: #28a745; }
.step-line { flex: 1; height: 2px; background: #ddd; margin: 15px 5px; }
.step-line.active { background: #007bff; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
.buttons { display: flex; justify-content: space-between; margin-top: 20px; }
button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
.next { background: #007bff; color: white; }
.prev { background: #6c757d; color: white; }
</style>
</head>
<body>
<div class="container">
<?php if (isset($message)): ?>
<h2><?php echo $message; ?></h2>
<a href="?restart=1">Start over</a>
<?php else: ?>
<div class="progress-bar">
<div class="step <?php echo $step >= 1 ? 'active' : ''; ?> <?php echo $step > 1 ? 'completed' : ''; ?>">1</div>
<div class="step-line <?php echo $step > 1 ? 'active' : ''; ?>"></div>
<div class="step <?php echo $step >= 2 ? 'active' : ''; ?> <?php echo $step > 2 ? 'completed' : ''; ?>">2</div>
<div class="step-line <?php echo $step > 2 ? 'active' : ''; ?>"></div>
<div class="step <?php echo $step >= 3 ? 'active' : ''; ?>">3</div>
</div>
<form method="POST">
<?php if ($step == 1): ?>
<h3>Step 1: Basic Information</h3>
<div class="form-group">
<label>Full Name</label>
<input type="text" name="name" value="<?php echo $_SESSION['reg_data']['name'] ?? ''; ?>" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" value="<?php echo $_SESSION['reg_data']['email'] ?? ''; ?>" required>
</div>
<?php elseif ($step == 2): ?>
<h3>Step 2: Contact Information</h3>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" name="phone" value="<?php echo $_SESSION['reg_data']['phone'] ?? ''; ?>" required>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" name="address" value="<?php echo $_SESSION['reg_data']['address'] ?? ''; ?>" required>
</div>
<?php elseif ($step == 3): ?>
<h3>Step 3: Account Setup</h3>
<div class="form-group">
<label>Username</label>
<input type="text" name="username" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" required>
</div>
<?php endif; ?>
<div class="buttons">
<?php if ($step > 1): ?>
<a href="?prev=1"><button type="button" class="prev">Previous</button></a>
<?php endif; ?>
<button type="submit" class="next"><?php echo $step == 3 ? 'Complete' : 'Next'; ?></button>
</div>
</form>
<?php endif; ?>
</div>
</body>
</html>

Type 7: Remember Me Login with Cookies

Features: Persistent login using cookies, "Remember Me" functionality.

<?php
// remember_login.php
session_start();
// Check for remember cookie
if (isset($_COOKIE['remember_user']) && !isset($_SESSION['user'])) {
$_SESSION['user'] = $_COOKIE['remember_user'];
}
if (isset($_SESSION['user'])) {
header('Location: dashboard.php');
exit();
}
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
$remember = isset($_POST['remember']);
if ($username == 'user' && $password == 'pass') {
$_SESSION['user'] = $username;
if ($remember) {
setcookie('remember_user', $username, time() + (86400 * 30), '/'); // 30 days
}
header('Location: dashboard.php');
} else {
$error = 'Invalid credentials';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Remember Me Login</title>
<style>
body { background: #2c3e50; font-family: 'Arial'; }
.container { width: 350px; margin: 100px auto; background: white; padding: 30px; border-radius: 5px; }
h2 { color: #2c3e50; text-align: center; }
input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd; border-radius: 3px; }
.checkbox-container { display: flex; align-items: center; margin: 10px 0; }
.checkbox-container input { width: auto; margin-right: 10px; }
button { background: #3498db; color: white; padding: 12px; width: 100%; border: none; border-radius: 3px; cursor: pointer; }
.error { color: #e74c3c; text-align: center; }
.footer { text-align: center; margin-top: 15px; color: #7f8c8d; }
</style>
</head>
<body>
<div class="container">
<h2>Welcome Back</h2>
<?php if ($error) echo "<p class='error'>$error</p>"; ?>
<form method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<div class="checkbox-container">
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me for 30 days</label>
</div>
<button type="submit">Login</button>
</form>
<div class="footer">
<a href="forgot_password.php">Forgot Password?</a> | 
<a href="signup.php">Create Account</a>
</div>
</div>
</body>
</html>

Type 8: CAPTCHA Protected Login

Features: Simple math CAPTCHA to prevent bots.

<?php
// captcha_login.php
session_start();
$error = '';
// Generate CAPTCHA
if (!isset($_SESSION['captcha'])) {
$_SESSION['captcha'] = rand(1, 10) . ' + ' . rand(1, 10);
$_SESSION['captcha_answer'] = eval('return ' . $_SESSION['captcha'] . ';');
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
$captcha = $_POST['captcha'];
if ($captcha != $_SESSION['captcha_answer']) {
$error = 'Incorrect CAPTCHA answer';
} elseif ($username == 'admin' && $password == 'admin123') {
$_SESSION['user'] = $username;
header('Location: dashboard.php');
} else {
$error = 'Invalid username or password';
// Generate new CAPTCHA
$_SESSION['captcha'] = rand(1, 10) . ' + ' . rand(1, 10);
$_SESSION['captcha_answer'] = eval('return ' . $_SESSION['captcha'] . ';');
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>CAPTCHA Login</title>
<style>
body { background: #ecf0f1; }
.container { width: 400px; margin: 100px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.captcha-box { background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 15px 0; text-align: center; }
.captcha-question { font-size: 24px; font-weight: bold; color: #2c3e50; }
input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; }
button { background: #27ae60; color: white; padding: 12px; width: 100%; border: none; border-radius: 4px; cursor: pointer; }
.error { color: #e74c3c; text-align: center; }
</style>
</head>
<body>
<div class="container">
<h2>Secure Login</h2>
<?php if ($error) echo "<p class='error'>$error</p>"; ?>
<form method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<div class="captcha-box">
<p>Please solve this math problem:</p>
<span class="captcha-question"><?php echo $_SESSION['captcha']; ?> = ?</span>
<input type="number" name="captcha" placeholder="Enter answer" required style="width: 100px; margin: 10px auto; display: block;">
</div>
<button type="submit">Login</button>
</form>
<p style="text-align:center; margin-top:15px">
<a href="?refresh=1">Refresh CAPTCHA</a>
</p>
</div>
</body>
</html>

Type 9: Fingerprint/Biometric Simulation

Features: Simulated biometric authentication with visual feedback.

<?php
// biometric_login.php
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['fingerprint'])) {
// Simulate fingerprint verification
$_SESSION['user'] = 'biometric_user';
header('Location: dashboard.php');
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Biometric Login</title>
<style>
body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.container { width: 400px; margin: 100px auto; background: white; padding: 40px; border-radius: 20px; text-align: center; }
.fingerprint-icon { width: 150px; height: 150px; margin: 20px auto; cursor: pointer; transition: all 0.3s; }
.fingerprint-icon svg { width: 100%; height: 100%; }
.fingerprint-icon:hover { transform: scale(1.1); }
.fingerprint-icon.scanning { animation: pulse 1s infinite; }
.fingerprint-icon.success { fill: #27ae60; }
.fingerprint-icon.error { fill: #e74c3c; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 10px #3498db); }
100% { transform: scale(1); }
}
.status { margin: 20px 0; font-size: 18px; color: #333; }
.alternative { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
.btn { background: #3498db; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; }
</style>
</head>
<body>
<div class="container">
<h2>Biometric Login</h2>
<p>Touch the fingerprint sensor to continue</p>
<form method="POST" id="biometricForm">
<div class="fingerprint-icon" id="fingerprint" onclick="simulateScan()">
<svg viewBox="0 0 24 24">
<path d="M12 2C8.69 2 6 4.69 6 8v4c0 3.31 2.69 6 6 6s6-2.69 6-6V8c0-3.31-2.69-6-6-6zm0 14c-2.21 0-4-1.79-4-4V8c0-2.21 1.79-4 4-4s4 1.79 4 4v4c0 2.21-1.79 4-4 4zm-2-6V8c0-1.1.9-2 2-2s2 .9 2 2v2h-4z"/>
</svg>
</div>
<input type="hidden" name="fingerprint" value="1">
</form>
<div class="status" id="status">Place your finger on the sensor</div>
<div class="alternative">
<p>Having trouble?</p>
<a href="basic_login.php" class="btn">Use Password Instead</a>
</div>
</div>
<script>
function simulateScan() {
const icon = document.getElementById('fingerprint');
const status = document.getElementById('status');
icon.classList.add('scanning');
status.textContent = 'Scanning...';
setTimeout(() => {
icon.classList.remove('scanning');
icon.classList.add('success');
status.textContent = 'Fingerprint verified! Logging in...';
setTimeout(() => {
document.getElementById('biometricForm').submit();
}, 1000);
}, 2000);
}
</script>
</body>
</html>

Type 10: Admin Panel Login with Role-based Access

Features: Different dashboards for admin, editor, and user roles.

<?php
// role_login.php
session_start();
$users = [
'admin' => ['password' => 'admin123', 'role' => 'admin', 'name' => 'Administrator'],
'editor' => ['password' => 'editor123', 'role' => 'editor', 'name' => 'Content Editor'],
'user' => ['password' => 'user123', 'role' => 'user', 'name' => 'Regular User']
];
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
if (isset($users[$username]) && $users[$username]['password'] == $password) {
$_SESSION['user'] = $users[$username];
header('Location: role_dashboard.php');
exit();
} else {
$error = 'Invalid credentials';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Role-based Login</title>
<style>
body { background: #f8f9fa; font-family: 'Segoe UI'; }
.container { display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-card { width: 400px; background: white; padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
h2 { color: #333; margin-bottom: 30px; text-align: center; }
.role-badges { display: flex; justify-content: space-around; margin-bottom: 30px; }
.badge { padding: 8px 15px; border-radius: 20px; font-size: 12px; color: white; }
.badge.admin { background: #e74c3c; }
.badge.editor { background: #f39c12; }
.badge.user { background: #3498db; }
input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; }
button { width: 100%; padding: 12px; background: #2c3e50; color: white; border: none; border-radius: 5px; cursor: pointer; }
.demo-accounts { margin-top: 30px; padding: 15px; background: #f8f9fa; border-radius: 5px; font-size: 14px; }
.demo-accounts h4 { margin: 0 0 10px 0; color: #666; }
.demo-accounts p { margin: 5px 0; color: #888; }
.demo-accounts span { display: inline-block; width: 80px; }
.error { color: #e74c3c; text-align: center; margin-bottom: 15px; }
</style>
</head>
<body>
<div class="container">
<div class="login-card">
<h2>Role-Based Access Control</h2>
<div class="role-badges">
<span class="badge admin">Admin</span>
<span class="badge editor">Editor</span>
<span class="badge user">User</span>
</div>
<?php if ($error) echo "<p class='error'>$error</p>"; ?>
<form method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<div class="demo-accounts">
<h4>Demo Accounts:</h4>
<p><span>Admin:</span> admin / admin123</p>
<p><span>Editor:</span> editor / editor123</p>
<p><span>User:</span> user / user123</p>
</div>
</div>
</div>
</body>
</html>
<?php
// role_dashboard.php
session_start();
if (!isset($_SESSION['user'])) {
header('Location: role_login.php');
exit();
}
$user = $_SESSION['user'];
$role = $user['role'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard - <?php echo ucfirst($role); ?></title>
<style>
body { font-family: 'Segoe UI'; background: #f8f9fa; }
.dashboard { max-width: 1200px; margin: 50px auto; padding: 20px; }
.header { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.role-badge { padding: 8px 15px; border-radius: 20px; color: white; }
.role-badge.admin { background: #e74c3c; }
.role-badge.editor { background: #f39c12; }
.role-badge.user { background: #3498db; }
.content { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.menu { display: flex; gap: 10px; margin-bottom: 20px; }
.menu a { padding: 10px 20px; background: #f0f0f0; text-decoration: none; color: #333; border-radius: 5px; }
.logout { padding: 10px 20px; background: #e74c3c; color: white; text-decoration: none; border-radius: 5px; }
</style>
</head>
<body>
<div class="dashboard">
<div class="header">
<div>
<h2>Welcome, <?php echo $user['name']; ?>!</h2>
<span class="role-badge <?php echo $role; ?>"><?php echo ucfirst($role); ?></span>
</div>
<a href="logout.php" class="logout">Logout</a>
</div>
<div class="menu">
<a href="#">Dashboard</a>
<a href="#">Profile</a>
<?php if ($role == 'admin' || $role == 'editor'): ?>
<a href="#">Content Manager</a>
<?php endif; ?>
<?php if ($role == 'admin'): ?>
<a href="#">User Management</a>
<a href="#">Settings</a>
<?php endif; ?>
</div>
<div class="content">
<?php if ($role == 'admin'): ?>
<h3>Admin Controls</h3>
<p>You have full system access. You can manage users, content, and settings.</p>
<ul>
<li>User Management</li>
<li>System Settings</li>
<li>Analytics Dashboard</li>
<li>Content Approval</li>
</ul>
<?php elseif ($role == 'editor'): ?>
<h3>Editor Dashboard</h3>
<p>You can create and edit content.</p>
<ul>
<li>Create New Post</li>
<li>Edit Existing Content</li>
<li>Media Library</li>
<li>Comments Moderation</li>
</ul>
<?php else: ?>
<h3>User Dashboard</h3>
<p>Welcome to your personal dashboard.</p>
<ul>
<li>View Profile</li>
<li>Account Settings</li>
<li>View Content</li>
<li>Support Tickets</li>
</ul>
<?php endif; ?>
</div>
</div>
</body>
</html>

Summary of Features

Form TypeKey FeaturesBest For
Basic LoginSimple username/passwordSmall websites, testing
Email LoginEmail validation, modern UIUser-friendly applications
2FA LoginTwo-step verificationBanking, security-critical apps
Social LoginOAuth integrationQuick user onboarding
Password StrengthReal-time validationSecurity-focused platforms
Multi-stepProgressive form fillingComplex registrations
Remember MePersistent cookiesFrequent-use applications
CAPTCHABot protectionPublic-facing forms
BiometricModern authenticationMobile-first applications
Role-basedAccess controlEnterprise applications

Security Best Practices Implemented

  1. Session Management - Using PHP sessions for user state
  2. Password Validation - Strength checking in real-time
  3. CSRF Protection - Form tokens (can be added to any form)
  4. Input Validation - Email format, required fields
  5. CAPTCHA - Basic bot prevention
  6. Remember Me - Secure cookie handling
  7. Role-based Access - Authorization levels

Setup Instructions

  1. Place files in your web server directory (htdocs for XAMPP)
  2. Access via localhost/filename.php
  3. For database integration, add MySQL connection
  4. Customize CSS for your branding
  5. Add proper password hashing (password_hash() function)
  6. Implement HTTPS in production

These forms demonstrate various authentication patterns used in modern web applications. Each type can be extended with database integration, email verification, password reset functionality, and more advanced security features.

Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper