Hello readers, Today in this blog you’ll learn how to create an Animated Login Form with Floating Label Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Responsive Chat Box Design and now I’m going to create a Login Form with Floating Label Animation.
A Login Form is a collection of credentials used to validate a user. Most often, these consist of a username and password. The login form is used by websites, computer applications, and mobile apps. A floating label is a text that appears inside the input field. When the user interacted with the input, the label “floats” above and making room for the user to input a value.
In this program (Login Form with Floating Label Animation), on the webpage, there is a Login Form with two input fields – Email and Password, a forgot password link, remember me checkbox, a button, and a signup link. When you focus on the input field, the label or text of the input float above. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.
f you like this program (Login Form with Floating Label Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Login Form in your HTML pages, websites, and projects.
You might like this:
Login Form with Floating Label Animation [Source Codes]
To create this program (Login Form with Floating Label Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login Form Design | CodeLab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="title">
Login Form
</div>
<form action="#">
<div class="field">
<input type="text" required>
<label>Email Address</label>
</div>
<div class="field">
<input type="password" required>
<label>Password</label>
</div>
<div class="content">
<div class="checkbox">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
</div>
<div class="field">
<input type="submit" value="Login">
</div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a>
</div>
</form>
</div>
</body>
</html>
0 Comments