Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

May 17, 2021 03:59 am GMT

Getting started with HTML Forms

When I first started my coding journey, one of the things that Ive noticed is that forms are everywhere, and its useful to get in the habit of creating forms, whether youre 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

Original Link: https://dev.to/chica25/getting-started-with-html-forms-1jfl

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To