Web mail logon
Here is a basic example of a web mail login form in HTML, CSS, and JavaScript:
HTML:
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
CSS:
#login-form {
width: 300px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
height: 30px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 100%;
height: 30px;
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
JavaScript:
const loginForm = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const username = usernameInput.value;
const password = passwordInput.value;
// Send the login credentials to the server for verification
// For demonstration purposes, we'll just log the credentials to the console
console.log(`Username: ${username}, Password: ${password}`);
});
This code creates a simple login form with a username and password input field, and a submit button. When the form is submitted, the JavaScript code prevents the default form submission behavior and logs the username and password to the console.
Note that this is a very basic example and you should never store passwords in plain text or log them to the console in a real-world application. You should always hash and store passwords securely, and verify them on the server-side using a secure authentication mechanism.
Also, this example does not include any kind of validation or error handling, which you should also implement in a real-world application to ensure that the user input is valid and the login process is secure.