mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-01 19:25:10 +02:00
Garry Tan
56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!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>
|