All you need to know is HTML elements (tags) and the basics of CSS for creating a login form for users, a very simple format with simple code example is as below: you can change your design with CSS.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 300px;
margin: auto;
margin-top: 50px;
}
h2 {
text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #1c19bb;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #9f0fc3;
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form>
<label for="email">Email:</label>
<input type="text" placeholder="Enter your email"
id="email" name="email">
<label for="password">Password:</label>
<input type="password" placeholder="Enter your password"
id="password" name="password">
<input type="submit" value="Login">
</form>
</body>
</html>
Here is a short explanation of the code, we have applied CSS styling to the html login form in this code. For the body element, we’ve used the sans-serif font family Arial and color #f2f2f2.
Also, we have styled the form element with a margin, padding, border radius, and white background. The h2 element’s text alignment and color, as well as the label element’s color and margin, have been set.
By adjusting the width, padding, border, border radius, margin, and box-sizing, we have styled the input components. Also, we have added background color, color, padding, border, border radius, and cursor to the login buttons styling. We have added a hover effect to the login button.