Skip to content
  • Home
  • Blog
  • Html & Css

    Top Categories

    Header & Footer
    Naviation Bar
    Unique Menu
    Card Designs
    Sections
    Animations
    Animated Buttons
    Landing Pages
    Sliders

    HTML Forms

    Login Form
    Sign up / Registration Form
    Contact Form

    Languages

    HTML
    CSS
    JAVASCRIPT
    PHP
    Avalible soon
  • Css Shadows
  • Color Picker
  • Write for us
WhatsApp Image 2022-11-09 at 1.57.47 AM
Search
Close
  • Form, Login Form, SignUp Form

Signup form HTML code | Login form html template

  • admin
  • June 10, 2022

Hello everyone, in this post, we will learn how to create a login and signup form using HTML and CSS.  In the last lecture, we discussed how to create an Html landing page template free | Landing page CSS. But today we will develop a signup and login form using HTML and CSS and for creating this type of form you have to follow the below steps.

 Login and signup form:

 Signup form:

Signup form HTML code Login form html template

This form has two sections login and signup section.  For entering into the website you have to create an account on the website and it will be created with the help of the sign-up form.  For creating the account on the website we have created a signup form and you have to use this form for registering yourself on the website. In this form, we have a heading at the top and then we have some fields and these fields collect the username, Email, and password of the user.  After putting all the information in the fields then you have to click the sign-up button and your account will be created.

You might like it:

  • Animated signup and sign in form 
  • login and signup form
  • Sliding login and registration form 

Login form

Login form html template

If you have an account on the website then you have to log in with the help of a login form but if you don’t have an account on the website then you have to create your account with the help of the signup form.  In this case, we have an account and for logging into the website we have to use the login form.  In this login form, we have a heading at the top of the form and then we have two fields Email and password. After entering your information in fields then you have to click a login button.

Colour, Fonts, and input fields:

For creating this signup and login form we have used Html and CSS only.  Button and content are created with the help of HTML.  On the other hand for the designing purpose, we have used CSS.  We have to use the background color, font family, font size, shadow, box, radius, input field, and the design created using CSS.  If you want to learn how to create this type of login and Sign up form using Html and CSS then follow the below steps.

 how to create a login and signup form?

This Login and signup form will be created in three major steps. You have to follow these steps to create this type of form.

Download  code editor:

 Accord editor is an environment that helps the developer to write the code.  code editor to save time and write the code without Syntax errors.  you can use sublime text Marvel Studio code are creating this form.

Html source code

After downloading the code editor you have to create a file in the code editor with the name of the form.Html.  And don’t forget to save an HTML file without an extension. HTML.  The source code is given below and you can use this code for creating your form.

HtmL Code
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login and Signup Form  - FantacyDesigns</title>
<link rel="stylesheet" href="style.css">
<link rel="JavaSctipt" href="script.js">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>
 
<body>
 
<div class="main">  
<input type="checkbox" id="chk" aria-hidden="true">
 
<div class="signup">
<form>
<label for="chk" aria-hidden="true">Sign up</label>
<input type="text" name="txt" placeholder="User name" required="">
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button>Sign up</button>
</form>
</div>
 
<div class="login">
<form>
<label for="chk" aria-hidden="true">Login</label>
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button>Login</button>
</form>
</div>
</div>
</body>
</html>

Source code of CSS

Buttons, fonts, color, shadow, radius, and all these things are designed and developed with the help of CSS.  CSS source code is given below and you have to paste this code into your newly created CSS file.

CSS Code
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Jost', sans-serif;
 
  background-image: linear-gradient(to bottom, #302b62, #36387a, #394693, #3855ac, #3264c7, #3264c7, #3264c7, #3264c7, #3855ac, #394693, #36387a, #302b62);
 
 
}
.main{
  width: 350px;
  height: 500px;
  background: red;
  overflow: hidden;
  background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
  border-radius: 10px;
  box-shadow: 5px 20px 50px #000;
     background: rgba( 255, 255, 255, 0.10 );
            box-shadow: 0px 10px 50px 0 rgb(31 38 135 / 20%);
            /* CHANGE THIS TO CHANGE THE BLUR AMOUNT */
            backdrop-filter: blur( 8.0px );
            -webkit-backdrop-filter: blur( 8.0px );
            border-radius: 10px;
            border: 1px solid rgb(255 255 255 / 15%);
                 text-align: center;
}
#chk{
  display: none;
}
.signup{
  position: relative;
  width:100%;
  height: 100%;
}
label{
  color: #fff;
  font-size: 2.3em;
  justify-content: center;
  display: flex;
  margin: 60px;
  font-weight: bold;
  cursor: pointer;
  transition: .5s ease-in-out;
}
input{
  width: 60%;
  height: 20px;
  background: #e0dede;
  justify-content: center;
  display: flex;
  margin: 20px auto;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 5px;
}
button{
  width: 60%;
  height: 40px;
  margin: 10px auto;
  justify-content: center;
  display: block;
  color: #fff;
  background: #312E67;
  font-size: 1em;
  font-weight: bold;
  margin-top: 20px;
  outline: none;
  border: none;
  border-radius: 5px;
  transition: .2s ease-in;
  cursor: pointer;
}
button:hover{
  background: #005DC0;
}
.login{
  height: 460px;
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(-180px);
  transition: .8s ease-in-out;
  
}
.login label{
  color: #573b8a;
  transform: scale(.6);
}
 
#chk:checked ~ .login{
  transform: translateY(-500px);
}
#chk:checked ~ .login label{
  transform: scale(1);  
}
#chk:checked ~ .signup label{
  transform: scale(.6);
}

Download source code of signup form:

If you don’t know how to connect these files with each other then we have created a file. In this file, we have both the files Html and CSS. These files are connected with each other. Just download the below file from the source code button and then extract the files from the .zip file.

Task:

As you can observe that we have both sign-in and sign-up forms and they are developed using HTML and CSS. Now add some extra features to them. Add form validation in the input fields So, that no one can press the login or sign-up button without filling in the required input fields. They change the color of the form and background as well. Text color is also changeable related to the background color.

I hope it was a helpful post for you and you have learned a lot from this article. If so, then don’t forget to like and share this post. Because it will help us to create such type of more and more content.

Thanks for reading this article.

Go to top
Download Source CodeClick to Download
PrevPreviousHtml landing page template free | Landing page CSS
NextTemplate sign up form | Signup form Html codeNext
Latest Post
How Analytics Inform User-Centric Web Design

How Analytics Inform User-Centric Web Design

The Impact of Machine Learning on Web Development

The Impact of Machine Learning on Web Development

Color Psychology in Landing Page Design: Choosing Palettes that Elicit Action and Emotion

Color Psychology in Landing Page Design: Choosing Palettes that Elicit Action and Emotion

The Power of Microinteractions: Enhancing User Engagement Through Small Gestures

The Power of Microinteractions: Enhancing User Engagement Through Small Gestures

The Importance of User Experience (UX) Design in Web Development

The Importance of User Experience (UX) Design in Web Development

Beginner’s Guide to Responsive Web Design

Beginner’s Guide to Responsive Web Design

Categories
Animations 25
Buttons animation 8
Calculator 1
Card Design 19
Contact Forms 10
Design 19

Leave a Comment Cancel reply

Related Post
How to Improve Website Performance with Optimized HTML, CSS, and JavaScript
Html and CSS

How to Improve Website Performance with Optimized HTML, CSS, and JavaScript

HTML, CSS, and JavaScript: A Dynamic Trio for Creating Responsive Websites
Html and CSS JavaScript

HTML, CSS, and JavaScript: A Dynamic Trio for Creating Responsive Websites

New Website Preloader with source code
Design

New Website Preloader with source code

About Us

Fantacy Designs  Provides Premium Html  Css and JS Designs with source code for free. 

Categories

  • Html
  • Css
  • JavaScript
  • Web Design

Quick Links

  • Contact Us
  • Write For Us
  • Privacy Policy
  • Terms and Conditions

Contact Info

  • fantacydesignss@gmail.com
  • +92333000000
  • Mansehra, Pakistan

Subscribe, For Weekly Updates

Copyright 2025 - FantacyDesigns - All Rights Reserved