Login Form with Floating placeholder

byCodingFlicks -December 25, 2022

0

In this blog post, we will create a login form with a floating placeholder animation. We will use HTML and CSS to create the form, and then use a simple CSS trick to create the floating placeholder animation. The form we will be creating looks like the above image. On our website, we have a lot of snippets related to CSS animation, and javascript. Click the “load more” button on the home page so that you can visit those pages. Check out the video demo of the project.

Login forms are a common element of websites. A login form consists of a username field and a password field, along with a button to log in. Visitors who enter credentials correctly are directed to the site or app. Forms are used to prevent unauthorized access to your application. They only allow users who have been authenticated. A placeholder text is typically a piece of text used to help the user understand what to write in the input field of a form.

Login forms are very boring. If some animations can be added to them, there is a chance that they will become more engaging and user engagement will increase. This snippet animates a placeholder's text in focus or an invalid state.

You May Also Like:

Login Form with Floating placeholder [ Source Code ]:

The first thing to do is create HTML and CSS files. When creating the files, link them correctly. You can save the code and test it on your browser.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Design with Placeholder animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <form>
            <div class="single-div">
              <input type="text" name="" required="">
              <label>Your Username</label>
            </div>
            <div class="single-div">
              <input type="password" name="" required="">
              <label>Your Password</label>
            </div>
            <a href="#" id="btn">Submit</a>
        </form>    
    </div>
</body>
</html>

ADD CSS:

html{
    height: 100%;
}
body {
    margin:0;
    padding:0;
    font-family: sans-serif;
    background: linear-gradient(#09d5e0, #f707ff);
  }
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
  }
  .single-div {
    position: relative;
  }
  
  .single-div input {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: #262626;
	margin-bottom: 30px;
	border: none;
	border-bottom: 2px solid #262626;
	outline: none;
	background: transparent;
}
  .single-div label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #262626;
    pointer-events: none;
    transition: .5s;
  }
  
  .single-div input:focus ~ label,
  .single-div input:valid ~ label {
    top: -20px;
    left: 0;
    color: red;
    font-size: 12px;
  }
  #btn {
	background: #262626;
	text-decoration: none;
	color: #fff;
	padding: 15px 0;
	display: block;
	text-align: center;
	margin-top: 10%;
}

We hope you liked the code! If you did, we'd appreciate it if you shared it with your friends. Thanks for visiting our website.

Please do not enter any spam link in the comment box.