Responsive Login And Signup Form Using HTML And CSS (May 2020)

That beautiful CSS css3 sign up & registration form templates are necessary for web designer interface. Learn more about the CSS css3 and HTML5 registration form. In this article we will show you some examples of CSS css3 html5 booking form templates, you can feel free to download this sample form templates and it is also possible to add or edit any text or field in those form. It will be helping you to save time for the design login form or registration form in your project.
Registration forms have different types are used intensively on the registration page of the website to allow user or visitor can create their profile on your website to get more benefits on a website such as a post article, download files, and more, it depends on website determination. By designing a registration form and make it scale to fit the browser window, the form templates often should become with sensitive design to look great

HTML

Before we start writing code first, we need to create a primary structure of the HTML document, so that the browser can understand and start working. The basic HTML structure looks like the following.

After writing the primary structure of the HTML document,you will also write the tags and content you need. After that, you can see the output in your browser. We know that HTML Sudu Mae is used for exposing content in a basic format. To complete our content we need to use CSS, which is an HTML insert and it creates an engaging user interface.

<!DOCTYPE html>
<html>
<head>
   <title>Sing Up Form</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="wrapper">
       <h2>Sing Up</h2>
       <form>
           <input type="text" name="" placeholder="Enter FirstName">
           <input type="text" name="" placeholder="Enter LastNane">
           <input type="text" name="" placeholder="Enter Email OR Mobile Number">
           <input type="password" name="" placeholder="Type Password">
           <input type="password" name="" placeholder="Re-Type Password">

           <input type="submit" name="" value="Submit Now">

       </form>
   </div>
</body>
</html>

CSS Now, we have time to improve the HTML content, for that, we need to add CSS to the HTML file. CSS can be added to HTML documents in a total of three ways, here we are using outside CSS design using CSS will arrive here after typing and see the output in your browser.

body{
   background-image: url(https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034_1280.jpg);
   background-size: cover;
}

.wrapper{
   padding: 20px;
   max-width: 350px;
   background:linear-gradient(#eea8a8, #782020);
   background:-webkit-linear-gradient(#eea8a8, #782020);
   background:-moz-linear-gradient(#eea8a8, #782020);
   opacity: 0.8;
   color: #fff;
   margin-top: 100px;
   border: 1px solid #eeefff;
   float: right;
   margin-right: 20px;
   font-family: arial;
}

form{
   margin-top: 50px;
}

input{
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
   margin-bottom: 10px;
   border:none;
   outline: none;
   border-radius: 5px;

}

h2{
   margin: 0;
   padding: 0;
   font-size: 2em;
   text-align: center;
   color: black;
}

input[type=submit]{
   font-size: 16px;
   margin-top: 30px;
   color: #fff;
   font-weight: bold;
   background:#cc0033;
   border:1px solid #eee;
   cursor: pointer;
}

input[type=submit]:hover{
   background-color: black;
   color:white;
}

@media(max-width: 600px){
   .wrapper{
       margin-right: 0;
   }
}