How to Create Simple Login Form In HTML

Looking for a login form that is easy to use and visually appealing? Look no further than this simple login form in html. With its clean design and user-friendly interface, this template offers a hassle-free login experience. The template features a title that clearly identifies the purpose of the form, as well as email and password input fields to securely enter login credentials.

Additionally, the template includes a link to reset forgotten passwords, ensuring that users can regain access to their accounts without difficulty.

No doubt, the login forms are the most important and the first thing on any website which offers paid content or services. If you have a site that offers services or sells products then you surely want the login form should be designed in a good manner.

If you start building a form from scratch, It will take a lot of time which you surely want to save it. If that is the case then you should go with readymade forms that take less time to implement. If you are looking for more design ideas then you can take a look list of login page in html with css code example and demo.

All you need to copy and paste HTML and CSS code and you are done with awesome design. So, let’s start with HTML coding.

How to Create Simple Login Form in HTML

First of all, We’ll take a look at the markup. We did keep the markup simple and easy to understand.

We did define a div with a class name simple login. This will be our main container which holds the HTML code of the form and its fields.

As the login form doesn’t have too many fields so we keep it simple with username and password input fields. And of course, the submit button should be there.

<div class="simpleLogin">
  <form>
    <legend>Let's Login</legend>
    <fieldset>
      <input id="name" placeholder="Username" type="text">
      <input id="pass" placeholder="Password" type="password">
      <input id="submit" type="submit" value="Log in">
    </fieldset>
  </form>
</div>        

Apply CSS Styles to Simple Login Form

The CSS for the login form is also easy to understand and we first do basic styling. We have set the max-width which can be changed as you need.

I have done some general styling for the form fieldset and form legend element.

.simpleLogin form {
  max-width: 400px;
  margin: auto;
  background:#fefefd;
  box-shadow: 0 10px 10px #222;
}
.simpleLogin form fieldset {
    border: 0 none;
    margin: 0;
    padding: 20px;
}
.simpleLogin form legend,
.simpleLogin form fieldset input {
  font-family: Open Sans;
  font-size:15px;
}
.simpleLogin form legend {
    background-color: #8fc400;
    border-top: 0 none;
    color: white;
    display: table-cell;
    padding: 10px 20px;
    width: auto;
}

Now, I’ll try to keep the simple design as possible for the login form. In the following CSS, I apply some background, border, etc for input fields and submit button.

.simpleLogin form fieldset input {
  width: 90%;
  margin: 10px 0;
  padding: 10px 5%;
  border: thin #8fc400 solid;
}
.simpleLogin input[type="submit"] {
  width: 100px;
  float: right;
  background: #8fc400;
  color: white;
  transition: .2s;
  border: 0;
  cursor:pointer;
}
.simpleLogin input[type="submit"]:focus,
.simpleLogin input[type="submit"]:hover, 
.simpleLogin input[type="submit"]:active {
  padding: 10px 5%;
  background:#B3E226;
  outline: none;
}

You are not limited to this only. You can try to add some more styling in this Login Form as you want. It’s easy to add some more color, background, icons, etc.

We just try to keep this login form as simple as possible. I am planning to make some more login form tutorials with animations and some nice and beautiful designs.

Feel free to download the HTML and CSS code of this login form and don’t forget to check the demo page. I’ll try to come up with something more interesting next time.