- We create a simple HTML form with fields for entering a username and password.
- We use JavaScript to prevent the default form submission behavior and handle the form submission using the
submitevent. - Inside the submit event handler, we retrieve the values entered by the user in the username and password fields.
- We perform basic validation to check if the entered username and password match a predefined set of values. In a real application, you would typically validate against a database or some backend service.
- If the login is successful, we display an alert message. You can replace the alert with a redirect to another page or any other action you desire.
HTML code
<!DOCTYPE html>
<html lang>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<head>
<title>Am mukesh academic</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#login-container {
margin: 100px auto;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-container{
position:absolute;
top:-500px;
}
input{
margin-top:20px;
cursor: pointer;
}
#show_password{
margin-left:40px;
}
.fa-xmark{
position:absolute;
font-size:30px;
top:100px;
left:788px;
background-color:green;
color:white;
cursor: pointer;
}
button{
padding:5px 30px;
cursor: pointer;
}
</style>
<body>
<div id="login-container">
<h2>Login</h2>
<i class="fa-solid fa-xmark"onclick="kumar()"></i>
<form id="login-form">
<label for="username">UserName :</label>
<input type="text"id="username"name="username"required>
<label for="password">Password :</label>
<input type="email"id="password"name="password"required><br>
<div class="show_password">
<input type="checkbox"onclick="mukesh()"><label>Show Passowrd</label></div><br><br>
<button type="submit">Login</button>
</form>
</div>
</body>
<script>
function mukesh(){
var x = document.getElementById("password");
if(x.type === "password"){
x.type = "text"
}
else{
x.type = "password"
}
}
function kumar(){
document.getElementById("login-container").classList.toggle("login-container")
document.getElementById("login-container").classList;
}
</script>
</html>
Download source code just coppy and past