DEV Community

loading...
Cover image for Getting started with HTML Forms

Getting started with HTML Forms

chica25 profile image Patricia C. Updated on ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

CSS

Create a universal selector with a 0 margin and padding.

* {
   margin: 0;
   padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And there you have it.

Photo by Andrea Piacquadio from Pexels

Discussion (0)

Forem Open with the Forem app