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:


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



  .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;



No comments :

Post a Comment