Privacy & Policy

ads

pop ads

How To Create a Login Form in html and css

benrobo April 09, 2021


Login form as become one of the outstanding ways of getting users information of feedback on a website . This has been done by using a form and login form to allow user to complete the feedback and submit the form.

Now the process of providing feedback to website is also becoming more effective and faster.

I think in the next couple of years we are going to see a big shift towards this. Users will start receiving feedback at all stages of their website life cycle from initial design to final production.

Another advantage of using forms is that they allow the user complete control of what information is sent to the website as well as the control to filter out information that he/she does not want to be sent. 

Today, as you have already found out from the title, I will be walking you through the creation of a login page using HTML, CSS and JavaScript. But don’t worry. Again, as the title says, this is your first login page, which means the code is as simple as possible and there will be an explanation to accompany each piece of code.
Before jumping to the code though, let me show you what we will be creating:
This is how the functionality goes: whenever a user clicks on the login button a login form is showed, easy right.








As you can see, this is just a simple login form built using html and css. so before starting out this project i assume you have a basic understanding of html and css. okk, so let the game begin.

How To Create a Login Form

Step 1) Add HTML:
The first thing you need to do right now is create a new folder and give it whatever name you want, mine would be "Simple Login Form". then create this two seperate files called html & css. 
Open up your html  file and add this code below:


<!DOCTYPE html>
<html>
    <head>
        <title>Simple Login Form</title>
    </head>
    <body>
<h2>Modal Login Form</h2>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

<div id="id01" class="modal">
  
  <form class="modal-content animate" action="/action_page.php" method="post">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>
        
      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>

    </body>
</html>

As usual in HTML files, we have two parts: the <head> and the <body> . The former includes meta-information about our web page, like the character encoding used, the title of the page (the name you see in the tab of your browser) and references to the CSS and JavaScript files which this HTML file will make use of. Due note that there’s a defer attribute in the <script> tag so that the JavaScript script is only executed after the HTML is fully loaded.

In the <body>, we include all the information that will be visible in our page. 

By the way, if you’re wondering why the <input> elements are not closed, it’s because they don’t need closing tags (</input> or something among those lines). It’s what we call self-closing tags.

Of course, we make plenty use of ids and classes to facilitate our work with CSS. The ids allow us to select HTML elements unambiguously, that is, each id represents a single element of our file. On the other hand, The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name. We’ll see the practical use of these ids and classes next.

Note: as you can see we added an onclick attribute to our button bellow the html code above which will be  called and handled by the javascript only.💪💪 
Just having html without CSS makes our login site looks ugly, now let add our css codes which would style out all html tags.
Step 2) Add CSS:

body {
font-family: Arial, Helvetica, sans-serif;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
color:#fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 16;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 30px;
  border: none;
  outline: none;
}

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}


.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

Now we have the CSS, in other words, the style of our page. To modify each element in our HTML file, we can select them using ids, classes or the tag names themselves, though the last option is discouraged. You see, the styles of more specific CSS selectors overwrite the styles of less specific ones. For example, the styles of an id selector overwrite those of a class selector, and class selector styles overwrite those of a tag name selector. In other words, always make your CSS selectors as specific as possible to affect only the elements you want to be affected.

And don’t forget, while tag name selectors just need the name of the tags, id selectors start with the pound sign (#) and class selectors start with a dot (.). If an element has an id “test-id”, then it can be selected in the CSS by its id using #test-id. If an element has a class “test-class”, then it can be identified as .test-class.


Not just that, we also added an animation using the css @keyframes  rules in creating a slight animation with css,  but wait, i dont still understand the @keyframes rule.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Tip: For best browser support, you should always define both the 0% and the 100% selectors.

Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

And after all this let see what we got.


Wait a minute


so you are telling me right now that, all this code we just rote just produce this..??? well relax, but where is the form..??  the form is hidden cause we set the form container which is the .modal to display none by default, undserstood.😇😅😅..
Now it time to handle the magic with javascript.
Step 2) Add Javascript:
Now, open the previous javascript file which you created and copy out this snippet of code into your javascript file.
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

So, as you can see, we are selecting an element from the DOM (Document Object Model) using a method called getElementById("element id"); the function of this method is to search for an element  that has the id provided in the dom, and in this case it our  <div id="id01"></div>, .. hope it cleared.

we also added an onclick event on our browser window, which checks for whata element is been fired off, in our case it the button which is been clicked. remember we set an onclick event on our span element  which  is responsible for closing our modal when it been opened by the login button
 And wala we got this, a fully created login form using HTML, CSS, & Javascript..................







You can also view and test this code live at: Sololearn Code Playground

And… that’s it. We’ve reached the end of this explanation and now you have a fully functional login page created with HTML, CSS and JavaScript. I think this is a great idea for the early stages of learning front-end web development as it can be easily improved upon by adding animations, changing the design of the page or making the validation server-side when you learn a back-end language like Node.js, Java, PHP, etc.

I hope this article has been helpful for you and by all means let me know your feedback  💖💖


Post a Comment

0 Comments