Scribd
Upload
2 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

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
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