jQuery Floating Label – Move Placeholder to Top on Typing

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	Floating Label
Author:	Charles Hudson
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version,
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	3.17 KB

Demo Download

How to Make jQuery Floating Label

1. Create input filed with label whose placeholder text you want to float.
Note: No need for creating placeholder text, it will automatically inserted from label text.

<label for="name">Name</label>
<input id="name" type="text" />

2. After that, load the jQuery JavaScript library and Floating Label‘s Js file into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Floating Label Js -->
<script src="js/floating-label.jquery.js" type="text/javascript"></script>

3. Finally, call the plugin with label selector in jQuery document ready function.

$(document).ready(function(){

   $('label[for="name"]').FloatingLabel();

});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.