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.