Simple jQuery snippet to convert form labels into inline placeholders

label-to-placeholder.js

 $("form :input").each(function(index, elem) {
    var eId = $(elem).attr("id");
    var label = null;
    if (eId && (label = $(elem).parents("form").find("label[for="+eId+"]")).length == 1) {
        $(elem).attr("placeholder", $(label).html());
        $(label).remove();
    }
 });

very simple and work amazingly :) thanks!

Great work, thanks.

I don't think you want to remove the label. This will cause accessibility issues. Instead it might be better to add a class that hides the label with a large negative indent value: https://gist.github.com/kylerush/8f2717705ee172a3533f

Just Perfect...

Thanks for improving my life.

great its working.. thanks

Thanks for this useful snippet!

Great !
but can you check on iPad / iPhone ? i tried and it not work on iPhone/iPad
Thanks !

Is this creating <br> in place of the label for anyone else?

"Is this creating
in place of the label for anyone else?"

$(label).html()); -> $(label).text());

Hi I want to implement this in an Internet Explorer 9 and below in a way that when the input box is on focus, the place holder text is still there until the user starts typing and the placeholder disappears. In IE9 the placeholder seems to disappear as soon as the input box is on focus and this is so annoying. hate you IE9 +

I like this, exactly what I need!

make my day tnx!

Thanks!!!!!!!

or do $(label).hide(); instead of $(label).remove(); that way it's still there for the screen readers.

Actually you probably want to check if the field is a select and adjust the replacement behavior appropriately (setting the "placeholder" attribute of a select input will not display that text):

$("form :input").each(function(index, elem) {
var eId = $(elem).attr("id");
var label = null;
if (eId && (label = $(elem).parents("form").find("label[for="+eId+"]")).length == 1) {
if($(elem).is("select")) $(elem).prepend("<option value disabled selected hidden>"+$(label).html()+"</option>");
else $(elem).attr("placeholder", $(label).html());
$(label).hide();
}
});