How to create a simple and Beautiful Html login form design 

html login form


Html Design Form:-

An HTML  form is the main source of every document that stores information of users on a webserver using to interact controls on the login page and interact fully.

Html form contains information like username, password, mobile number, email id, gender...etc.,




<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>form</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="assets/css/Login-Form-Clean.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>


And more elements HTML forms like checkbox, input box, radio buttons, and main submit to post on server and user to submit the information in the webserver.


<body>
    <div class="login-clean">
        <form action="" method="post">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration">
                <i class="icon ion-ios-navigate"></i>
            </div>
            <div class="form-group">
                <input class="form-control" type="email" name="email" placeholder="Email">
            </div>
            <div class="form-group">
                <input class="form-control" type="password" name="password" placeholder="Password">
            </div>
            <div class="form-group">
                <a href="" class="button-col">Log In
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
                <p style="text-align: center;">or</p>
            <a class="forgot" href="#">Forgot your email or password?</a>
        </form>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>



Nowadays there are many focuses on making increase more responsive, adaptive, and user-friendly for users or visitors, and when designing a website there are many things that need to be considered but one thing you must never forget is a form. The most important thing overall the design comes to connect with admin and users. 

HTML Forms code:-

First of all, you have to create three things:-

1.Text field in HTML  Forms:
2.Password Field in HTML Forms:
3.Text area, Radio button, checkbox, DropDown or Submit Button.

.login-clean .illustration 
{
   color:#262c37; 
}
.forgot
{
   margin-top:20px;
   font-size:14px !important;
}
.forgot:hover
{
    color:#2894ff !important;
}
.button-col
{
font-family:sans-serif;
position:relative;
display:inline-block;
padding:10px 85px;
text-decoration: none;
color:#2894ff;
background:#262c37;
font-size:16px;
left:5px;
margin:10px;
}
.button-col:hover
{
text-decoration: none;
background:#2894ff;
color:#1f242d;
transition:0.5s;
transition-delay:0.5s;
}
.button-col span
{
position:absolute;
display:block;
background:#2894ff;
}
.button-col span:nth-child(1)
{
left:0;
bottom:0;
width:2px;
height:100%;
transform:scaleY(0);
transform-origin:top:
transition:transform 0.25s;
}
.button-col:hover span:nth-child(1)
{
transform:scaleY(1);
transform-origin:bottom:
transition:transform 0.25s;
}
.button-col span:nth-child(2)
{
left:0;
top:0;
width:100%;
height:2px;
transform:scaleX(0);
transform-origin:right:
transition:transform 0.25s;
transition-delay:0.25s;
}
.button-col:hover span:nth-child(2)
{
transform:scaleX(1);
transform-origin:left:
transition:transform 0.25s;
transition-delay:0.25s;
}

.button-col span:nth-child(3)
{
right:0;
bottom:0;
width:2px;
height:100%;
transform:scaleY(0);
transform-origin:bottom:
transition:transform 0.25s;
transition-delay:0.5s;
}
.button-col:hover span:nth-child(3)
{
transform:scaleY(1);
transform-origin:top:
transition:transform 0.25s;
transition-delay:0.5s;
}
.button-col span:nth-child(4)
{
left:0;
bottom:0;
width:2px;
height:100%;
transform:scaleX(0);
transform-origin:left:
transition:transform 0.25s;
transition-delay:0.75s;
}
.button-col:hover span:nth-child(4)
{
transform:scaleX(1);
transform-origin:right:
transition:transform 0.25s;
transition-delay:0.75s;
}


Previous Post Next Post