Registration Form
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Register</h1>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required><br>
<button type="button" onclick="checkRegistration()">Register</button>
</form>
<p>Already have an account? <a href="#" onclick="showLoginForm()">Log In</a></p>
<div id="registrationResult"></div>
<script>
function checkRegistration() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
document.getElementById('registrationResult').innerHTML = 'Passwords do not match!';
} else {
// Perform registration logic here (e.g., send data to server or save in localStorage).
// Once registered, you can redirect to the login form.
showLoginForm();
function showLoginForm() {
document.getElementById('registrationForm').reset();
document.getElementById('registrationResult').innerHTML = '';
document.getElementById('username').focus();
document.getElementById('registrationForm').style.display = 'none';
document.getElementById('loginForm').style.display = 'block';
</script>
</body>
</html>
Login Form
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1>Log In</h1>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="loginUsername" required><br>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="loginPassword" required><br>
<button type="button" onclick="checkLogin()">Log In</button>
</form>
<p>Don't have an account? <a href="#" onclick="showRegistrationForm()">Register</a></p>
<div id="loginResult"></div>
<script>
function checkLogin() {
var loginUsername = document.getElementById('loginUsername').value;
var loginPassword = document.getElementById('loginPassword').value;
// Perform login logic here (e.g., check credentials with a server or localStorage).
// If login is successful, you can redirect to a dashboard or another page.
// Otherwise, display an error message.
function showRegistrationForm() {
document.getElementById('loginForm').reset();
document.getElementById('loginResult').innerHTML = '';
document.getElementById('loginUsername').focus();
document.getElementById('loginForm').style.display = 'none';
document.getElementById('registrationForm').style.display = 'block';
</script>
</body>
</html>
