Scribd
Upload
21 views

Answer 3

The document contains code for a registration form and login form. The registration form collects a username, password, and password confirmation from the user. It checks if the passwords match and registers the user or displays an error. The login form collects a username and password and performs login validation. Buttons allow toggling between the registration and login forms.

Uploaded by

Ritik Chaudhary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

Answer 3

The document contains code for a registration form and login form. The registration form collects a username, password, and password confirmation from the user. It checks if the passwords match and registers the user or displays an error. The login form collects a username and password and performs login validation. Buttons allow toggling between the registration and login forms.

Uploaded by

Ritik Chaudhary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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>

You might also like