Scribd
Upload
6 views4 pages

HTML CSS JS

The document describes a simple HTML login form that collects a username and password, styled with CSS. Upon clicking the submit button, an alert displays 'Login successful!' if both fields are filled; otherwise, it prompts the user to enter both credentials. The code includes inline CSS for styling and JavaScript for handling the login functionality.

Uploaded by

sheikhshahib123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

HTML CSS JS

The document describes a simple HTML login form that collects a username and password, styled with CSS. Upon clicking the submit button, an alert displays 'Login successful!' if both fields are filled; otherwise, it prompts the user to enter both credentials. The code includes inline CSS for styling and JavaScript for handling the login functionality.

Uploaded by

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

HTML, CSS and JAVASCRIPT

 Creating form which will take username, password as input and a submit
button.
 Use css for formatting
 On clicking submit button, it will display alert “successful login” if there will
be username and password.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>

<!-- Inline CSS (Internal Style) -->


<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.login-container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

h2 {
margin-bottom: 20px;
}

input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<div class="login-container">
<h2>Login Form</h2>
<form id="loginForm">
<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>

<!-- Submit Button with onclick event -->


<button type="button" onclick="login()">Login</button>
</form>
</div>

<!-- Inline JavaScript -->


<script>
function login() {
// Get the values entered by the user
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

// Check if both fields are filled


if (username && password) {
// Display success message in a popup
alert("Login successful!");
} else {
// If any field is empty, show an error message
alert("Please enter both username and password.");
}
}
</script>

</body>
</html>

You might also like