<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page - Forms</title>
<style>
body { font-family: sans-serif; padding: 20px; }
form { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; }
label { display: block; margin: 5px 0; }
input, select, textarea { margin-bottom: 10px; padding: 5px; }
#result { color: green; display: none; }
</style>
</head>
<body>
<h1>Form Test Page</h1>
<form id="login-form" action="/login" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit" id="login-btn">Log In</button>
</form>
<form id="profile-form" action="/profile" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name">
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" placeholder="Tell us about yourself"></textarea>
<label for="role">Role:</label>
<select id="role" name="role">
<option value="">Choose...</option>
<option value="admin">Admin</option>
<option value="user">User</option>
<option value="guest">Guest</option>
</select>
<label>
<input type="checkbox" id="newsletter" name="newsletter"> Subscribe to newsletter
</label>
<button type="submit" id="profile-btn">Save Profile</button>
</form>
<div id="result">Form submitted!</div>
<script>
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
document.getElementById('result').style.display = 'block';
console.log('[Form] Submitted:', form.id);
});
});
</script>
</body>
</html>