Scribd
Upload
3 views6 pages

Program 008

The document provides a complete HTML and JavaScript code for a login page that validates user credentials. It includes a form for username and password input, and a JavaScript function to check if the entered credentials match predefined values. If the validation fails, appropriate messages are displayed to the user.

Uploaded by

tokovi5401
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
3 views6 pages

Program 008

The document provides a complete HTML and JavaScript code for a login page that validates user credentials. It includes a form for username and password input, and a JavaScript function to check if the entered credentials match predefined values. If the validation fails, appropriate messages are displayed to the user.

Uploaded by

tokovi5401
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

PROGRAM:- 08

Q8. To Check Validation (User Name & Password ) in login page By Using
Javascript.

Source code:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Page</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f3f4f6;

h2 {

text-align: center;

color: #333;

#loginForm {

background-color: #fff;

padding: 20px;

border-radius: 8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);

width: 300px;

label {

display: block;

margin-bottom: 5px;

color: #555;

input[type="text"],

input[type="password"] {

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

button {

width: 100%;

padding: 10px;

background-color: #4CAF50;

border: none;

border-radius: 4px;

color: white;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s ease;


}

button:hover {

background-color: #45a049;

#message {

text-align: center;

font-weight: bold;

margin-top: 10px;

</style>

</head>

<body>

<div id="loginContainer">

<h2>Login Page</h2>

<form id="loginForm">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<button type="button" onclick="validateLogin()">Login</button>

</form>

<p id="message"></p>

</div>

<script>
function validateLogin() {

// Get input values

const username = [Link]("username").value;

const password = [Link]("password").value;

const message = [Link]("message");

if (username === "" || password === "") {

[Link] = "Username and Password are required.";

[Link] = "red";

return false;

const validUsername = "dipukumar18_2";

const validPassword = "king";

if (username === validUsername && password === validPassword) {

[Link] = "Login successful!";

[Link] = "green";

} else {

[Link] = "Invalid username or password.";

[Link] = "red";

</script>

</body>

</html>
OUTPUT :-

You might also like