December 05, 2015

Create Login Page with HTML5

Here I am are going to create a login page using the newly added features of HTML5. Let us also decorate a little bit to the login form with CSS to make it look nice and beautiful. So, lets begin with the code as below:

HTML CODE
  <html>
     <body>

    <section class="loginform cf">
     <form name="login" action="index_submit" method="get" accept-charset="utf-8">
    <ul>
        <li><label for="usermail">Email</label>
        <input type="email" name="usermail" placeholder="yourname@email.com" required></li>
        <li><label for="password">Password</label>
        <input type="password" name="password" placeholder="password" required></li>
        <li>
        <input type="submit" value="Sign in"></li>
     </ul>
    </form>
   </section>

    </body>

  </html> 

CSS CODE
  .loginform input[type=submit] {
    border: 1px solid #219d17;
    background: #219d17;
    color: #fff;
    padding: 5px 15px;
    margin-right: 0;
    margin-top: 15px;
    border-radius: 3px;
 
    }
 
        .loginform input:not([type=submit]) {
    padding: 5px;
    margin-right: 10px;


    }
        label {
    display: block;
    color: #999;
    }

        .loginform ul {
    padding: 0;
    margin: 0;
    }
 
    .loginform li {
    display: inline;
    float: left;
    }
     
        html {
    background: none;
    font-size: 12px;
    } 


RESULT







END...

No comments :

Post a Comment