How to Make a Form with Floating Labels using CSS
Hi, today I will teach you how to make a form with Floating Labels using CSS. In this tutorial, I will try to explain everything that you need to know to make it like a pro.
We will use CSS for styling and some JS to hide the floating label when there is some value inside that floating label’s input field.
Note: JS part is only for validating the input field’s value. It will check that if an input field has some value then it’s floating label will not come down to prevent overlapping with the entered value and label’s text.
What is the method to create floating labels
It is a very simple thing to understand. There should be the main container class to contain the input field and its label. The input box should have a unique id and it’s label should have a for attribute with the value of it’s respective input field’s id. The label should have a class which can be used to make it focused.
Example:
<div class="floating-label-box"> <input type="text" class="form-control" id="fullName"> <label for="fullName" class="floating-label">Full Name</label> </div>
I am using Bootstrap 4 for this example but it will work in Bootstrap 3 also.
Let’s create our form !
In the below-given code first, we have created a form with bootstrap as we usually do. We have added a class floating-label-box with form-group div and a floating-label class with a label tag. The input field has a unique id with the value fullName. This value is used in the for attribute of the label tag. We have to do this with every input field and select dropdown. But make sure to use different id for every field.
For select dropdown, we have added a class “focused” to its label. It will keep the label up to prevent overlap between dropdown options and label’s text. We will write CSS for these classes in the future.
<div class="container mt-3">
<div class="row">
<div class="col-md-6">
<div class="form-group floating-label-box">
<input type="text" class="form-control" id="fullName">
<label for="fullName" class="floating-label">Full Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group floating-label-box">
<select name="" id="designation" class="form-control">
<option value="0">Select</option>
<option value="">Front End Developer</option>
<option value="">Web Developer</option>
</select>
<label for="designation" class="floating-label focused">Designation</label>
</div>
</div>
</div>
</div>
Now we want to change the position of all the labels. We have to position the labels inside their respective fields. So we will write the given CSS for this task.
.floating-label-box {
position: relative;
}
.floating-label-box .floating-label {
position: absolute;
left: 10px;
top: 7px;
}
One more thing we will do only for the input field’s labels which is whenever we hover the cursor on the input field’s label it should display the same cursor as it does for the input field because the label is now looking like a placeholder of the input field. So write the given CSS for this.
input + .floating-label {
cursor: text;
}
The next thing we have to do is whenever we click on any field its respective label should move up smoothly and the label’s font size should be reduced. So we will write the following CSS.
.floating-label-box input:focus ~ .floating-label, .floating-label-box select:focus ~ .floating-label, .floating-label-box label.focused {
top: -8px;
font-size: 12px;
transition-timing-function: ease-out;
transition-duration: 0.2s;
background-color: white;
padding: 1px 2px;
z-index: 1;
}
Note: In the above CSS we have added one extra class .floating-label-box label.focused which we will be using to keep the labels focused if there is some value inside the input field.
Now if you run this in the browser you will notice that whenever you click on the field it’s respective labels moves up smoothly but when you click outside of the field there is no smoothness in labels. So let’s add the same smoothing effect to the .floating-label-box .floating-label class. So now it should look like this.
.floating-label-box .floating-label {
position: absolute;
left: 10px;
top: 7px;
transition-timing-function: ease-in;
transition-duration: 0.2s;
}
Now check it again in the browser. Labels should move up and down smoothly.
Focus the labels
Let’s keep the labels focused in case there is some value inside its respective input field.
Now we will use jQuery to check if there is some value inside the input field. In this case, it’s respective label should be in focused mode. So we don’t face any overlapping issue between input field value and label’s text.
Let’s place the given code to handle this situation.
$(".floating-label-box input[type='text']").on('blur', function() {
if($(this).val() != '') {
$(this).parent().find('.floating-label').addClass('focused');
}else{
$(this).parent().find('.floating-label').removeClass('focused');
}
});
Note: Don’t forget to include jQuery before using the given code.
The above code will check that if there is some value inside the input field then it will add focused class to it’s respective label else it will remove the focused class. Now your floating labels will work perfectly.
In case you have any queries regarding this tutorial, you can ask in comments. Thanks for visiting.
