When I first started my coding journey, one of the things that I’ve noticed is that forms are everywhere, and it’s useful to get in the habit of creating forms, whether you’re a frontend or backend engineer.
Here are several steps to create a simple login form with HTML and CSS
Start with the HTML file
Inside the body tag, enter a div tag with a class name, then the form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Form</title>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form>
</form>
</div>
</body>
In the form tag, implement the inputs for the email and password.
<form>
<input type="email" class="input-box" placeholder="enter your email" required>
<input type="password" class="input-box" placeholder="enter your password" required>
</form>
CSS
Create a universal selector with a 0 margin and padding.
* {
margin: 0;
padding: 0;
}
Enter the class attribute, .container as shown in the code below with the additional properties.
.container {
width: 100%;
height: 100vh;
font-family: sans-serif;
background: rgb(255, 255, 255);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
And there you have it.
Photo by Andrea Piacquadio from Pexels
Top comments (0)