When I type the input field label should go up. otherwise label should be placed inside the input. I have attached the sample image.Please refer the username and password fi
Those are called "floating labels". Have a look at these:
You do need to use the placeholder attribute, but you can set it to the HTML entity for a space character (
), so it's invisible. I wrote this for maximum browser compatibility (except it doesn't work in IE9 or older).
This works, without JS, in evergreen browsers (Firefox, Chrome, Safari, etc.) and
IE10-11. A polyfill is used to support
MS Edge (support for the
IE10 pseudo-class was removed but the non-prefixed one was not added) and
old versions of browsers from other organizations.