In this post you'll learn how to make a simple login form with float up placeholder using only HTML & CSS. Whenever user focus on input field, the placeholder floats up to give space for input.
Actually, its not a placeholder attribute that float up, here its a label tag that float up when input field it focused. Read further for more details.
Placeholder show's that which value, input field is expecting. When you use placeholder attribute to input field, its hide's when user type in input field. So here I have used label tag and make it float up when input field focus and input field have value.
Video Tutorial on Floating Placeholder:
Floating Placeholder.
We going to create simple form in which we add a floating placeholder of input fields.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
Steps to make floating placeholder using HTML and CSS.
Step 1: Create simple login form.
First of all, we'll create simple login form using HTML & CSS. But in this login form we'll add label tag as a placeholder. We'll add position the label tag in input field that it looks like an placeholder.
HTML
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<h1>Login</h1>
<form action="#">
<div class="input_box">
<input type="text" required>
<label>Username</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Password</label>
</div>
<button class="button" type="submit">Login</button>
</form>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(45deg , #250654 , #960080);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 350px;
background-color: #fff;
padding: 20px 30px;
box-shadow: 0px 4px 30px -10px rgb(0 0 0);
}
.box h1{
text-align: center;
font-size: 40px;
}
.box form .input_box{
width: 100%;
border-width: 0px 0px 2px 0px;
border-style: solid;
margin-top: 30px;
position: relative;
}
.box form .input_box input{
width: 100%;
border: none;
outline: none;
font-size: 25px;
padding: 7px 0px;
}
.box form .input_box label{
position: absolute;
left: 0px;
font-size: 25px;
top: 8px;
pointer-events: none;
transition: 0.2s;
}
.box .button{
margin-top: 30px;
font-size: 25px;
padding: 7px 20px;
color: #fff;
border: none;
background-color: #250654;
float: right;
cursor: pointer;
}
.box .button:active{
color: #000;
background-color: #fff;
}
Output :
Step 2: Making placeholder float up on focus.
To float up placeholder (here placeholder is label tag) I've use CSS. To float up, I have use :focus and :valid selector to input tag.
:focus selector for apply styling when input field focused and :valid selector for apply styling when input field has valid value according to its type.
We'll use + selector for apply styling to label tag on focus input field and valid input. But it only works when label tag position right below the input field in HTML file.
CSS
.box form .input_box input:focus + label,
.box form .input_box input:valid + label{
top: -15px;
font-size: 18px;
color: blue;
}
Output:
You may like:
- How to make an simple login and registration form using HTML & CSS.
- How to create an dynamic placeholder using HTML, CSS & JavaScript.
- How to create an animated input field using HTML, CSS & JavaScript.
- How to create animated border of input field using HTML, CSS & JavaScript.
- How to create sliding login and signup form using HTML, CSS & JavaScript.
Final code :
That's it, float up placeholder is ready using html and css. If you have any question or suggestion you can write in comment section.
Share your thoughts.