Skip to main content

How to create Login form in HTML & CSS | Simple Sign in form | Deesan Tutorials

Hello there!!! In this tutorial, we will learn to create a simple and minimalistic login form. A login form helps you to access the protected content in a website. You will require PHP & MySQL to make it functional, but today, we will learn to design the form using HTML & CSS. So let's get started!

Here is what we will have by the end of this tutorial:

I have also made a quick youtube video tutorial, which you can access if you are short of time.

So let's get started!

Step 0 - Prerequisites

Nothing much, just basic HTML and CSS. That's it. You are still welcome to learn bootstrap, by which you can design the whole form with lesser lines of code. But since this tutorial is for absolute beginners, we ain't using it. We will be using Google fonts to beautify our text, you can just skip the part if you are not interested.

Step 1 - Page structure

So, fire up your IDE and paste the following lines of code: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title>Simple login form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

This basically does nothing, and I'm not even kidding. This form the main part of the HTML document, and imports the required Google font using the link tag. That's it

Step 2 - Page styling

Just paste the following lines of code in the style tag: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  html, body {
    
    /* Basic styling */
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;

    background-color: #3ec397;
    font-family: 'Montserrat', sans-serif;
    
    /* Alignment */
    display: flex;
    justify-content: center;
    align-items: center;
  }

This does nothing either. Atleast not until you code something. What this basically does is just style the document to prevent the unnecessary scrollbar. I recommend that you remember the first 4 lines, whenever you code something in HTML. The next lines are to vertically center the text.

Step 3 - Form structure

Now coming to the main part. Paste the following lines of code in your body tag

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="container">
  <h1 class="title">Login</h1>

  <!-- Form -->
  <form class="form">
    
    <input type="text" class="input" placeholder="@username"/>
    <input type="password" class="input" placeholder="Password"/>

    <p class="forgot">Forgot Password?</p>

    <input type="submit" class="submit" value="Login"/>

    <span class="new">Create new account</span>


  </form>

</div>

This creates an unstyled form. It doesn't look that good, to be honest. But that's why we have CSS, which we will use in the next steps.

Step 4 - Form styling: Part 1

Paste the following code in the style tag to style the form: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
  .container {
    width: 20%;
    padding: 3%;
    background-color: white;
    border-radius: 10px 10px;
    color: #3ec397;
    text-align: center;

  }

  .form {
    padding: 3%;
  }

This styles the form container to fit to 20% of the screen width and curves the borders slightly with border-radius.

Step 5 - Form styling: Part 2

Now we will style the inputs and the button. Paste the following code right after the previous snippet: 

 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
  .input {
    
    display: block;

    font-family: 'Montserrat', sans-serif !important;

    width: 100%;
    padding: 3%;
    
    /* To solve problems in height */
    box-sizing: border-box;
    
    /* Margins */
    margin: 3%;
    margin-top: 10%;
    
    /* Border to give minimalistic look */
    border: 0;
    border-bottom: 3px solid #3ec397;
    
    /* Self explanatory */
    font-size: 1em;
  }

  .submit {
    width: 100%;
    padding: 5%;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: bold;

    margin: 3%;
    margin-top: 10%;

    border-radius: 2px 2px;

    background-color: #3ec397;
    color: white;

    border: 0;

    box-sizing: border-box;
    font-size: 1em;

  }

Now, this is too much code to digest at once, so I have added comments in between to help you understand better.
What this basically does is just give display: block to the elements to help in adjusting the width and height. There are other benefits of display:block too, a quick Google search will help you with it.

Then, we give the font as Montserrat, since it gives a clean and minimalistic look. We use box-sizing: border-box, since it solves problems related to height.

After this, we give margin 3% to space the elements and margin-top 10% so that it can have enough gap between the elements vertically to make it look nice.

Border 0 and border-bottom only to give an unique, furnished look to the inputs.

We then style the submit button to shape the borders a bit with a bold font

Step 6 - Form styling: Part 3

This is the last part of the form. It styles the forgot password? and create new account tags

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  .forgot {
    display: block;
    margin: 3%;
    margin-top: 10%;
    text-align: left;
  }

  .new {
    display: block;
    font-weight: bold;
    margin: 3%;
    margin-top: 10%;
  }

We basically do nothing different than the previous snippet. This just margins the span tags with display block and aligns them to the left.

Hope this tutorial helped you. If you want other CSS/HTML/JS/JQuery/PHP/Vue tutorials, drop a comment and I will look into it.

Final code

  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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
  <head>
    <title>Simple login form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
    <style>
      html, body {
        
        /* Basic styling */
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;

        background-color: #3ec397;
        font-family: 'Montserrat', sans-serif;
        
        /* Alignment */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        width: 20%;
        padding: 3%;
        background-color: white;
        border-radius: 10px 10px;
        color: #3ec397;
        text-align: center;

      }

      .form {
        padding: 3%;

      }

      .input {
        
        display: block;

        font-family: 'Montserrat', sans-serif !important;

        width: 100%;
        padding: 3%;
        
        /* To solve problems in height */
        box-sizing: border-box;
        
        /* Margins */
        margin: 3%;
        margin-top: 10%;
        
        /* Border to give minimalistic look */
        border: 0;
        border-bottom: 3px solid #3ec397;
        
        /* Self explanatory */
        font-size: 1em;
      }

      .submit {
        width: 100%;
        padding: 5%;

        font-family: 'Montserrat', sans-serif !important;
        font-weight: bold;

        margin: 3%;
        margin-top: 10%;

        border-radius: 2px 2px;

        background-color: #3ec397;
        color: white;

        border: 0;

        box-sizing: border-box;
        font-size: 1em;

      }
          
      .forgot {
        display: block;
        margin: 3%;
        margin-top: 10%;
        text-align: left;
      }

      .new {
        display: block;
        font-weight: bold;
        margin: 3%;
        margin-top: 10%;
      }

      

    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="title">Login</h1>

      <!-- Form -->
      <form class="form">
        
        <input type="text" class="input" placeholder="@username"/>
        <input type="password" class="input" placeholder="Password"/>

        <p class="forgot">Forgot Password?</p>

        <input type="submit" class="submit" value="Login"/>

        <span class="new">Create new account</span>


      </form>

      <!-- Thanks for watching! Have a great day. Check my channel for more HTML/CSS/JS/Vue/PHP tutorials -->
      <!-- Check the description for full code with explanation -->

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

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Creating a simple search bar using HTML and CSS

Hello there! Today we will be covering one of the most basic, yet essential things on most websites and blogs: A search bar. A search bar helps clients to navigate through the website rather than typing the URL in the browser, thereby avoiding the crumblesome process. In this post, we will be creating a simple and minimalistic search bar using basic HTML and CSS Here is what we will be doing: Here is the YouTube tutorial: So let's get started! Step 0 - Prerequisites Since this is a simple tutorial, not much is expected from you, except for basic HTML and CSS. We will be using font awesome library for the search icon. If you are not interested in external libraries, you can just insert a search image and style it accordingly. Step 1 - Initialize Just basic html tags and loading the font awesome library 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> Simple search bar </title> <!-- Font awesom...
Post a Comment
Read more

Center element horizontally and vertically to center of screen using plain CSS - Deesan Tutorials

Hello there!!! In this post you will learn the solution to one of the most sought after problems for web designers: Centering a div both horizontally, and vertically Here is the end result: Here is the youtube tutorial: So let's get our hands to work Step 1: Initialize So this is just the basic stuff of every HTML page: DOCTYPE, html, head and body tags. Just fire up your code editor and paste the following code: 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title> Center element </title> <style> </style> </head> <body> </body> </html> This just creates an empty HTML document Step 2: Elements So, for this tutorial, we are just creating a parent div with a child div in it which we will center shortly. For now, enter the following code in the body tag: 1 2 3 4 5 <div class= "parent" > <div class= "child" > </div> </div> Th...
Post a Comment
Read more