Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple jQuery snippet to convert form labels into inline placeholders
$("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();
}
});
@lllychen

This comment has been minimized.

Copy link

commented Jun 27, 2013

very simple and work amazingly :) thanks!

@mattsandersuk

This comment has been minimized.

Copy link

commented Feb 23, 2014

Great work, thanks.

@kylerush

This comment has been minimized.

Copy link

commented May 29, 2014

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

@omer414

This comment has been minimized.

Copy link

commented Jun 9, 2014

Just Perfect...

@samuelbeek

This comment has been minimized.

Copy link

commented Jul 5, 2014

Thanks for improving my life.

@alvinsebastian

This comment has been minimized.

Copy link

commented Oct 31, 2014

great its working.. thanks

@dje174

This comment has been minimized.

Copy link

commented Sep 7, 2015

Thanks for this useful snippet!

@chinhexp

This comment has been minimized.

Copy link

commented Dec 16, 2015

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

@willbraden

This comment has been minimized.

Copy link

commented Jan 11, 2016

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

@apple-e

This comment has been minimized.

Copy link

commented Mar 10, 2016

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

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

@sanjokgrg23

This comment has been minimized.

Copy link

commented Apr 11, 2016

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 +

@Jenyushka

This comment has been minimized.

Copy link

commented May 11, 2016

I like this, exactly what I need!

@wladan

This comment has been minimized.

Copy link

commented May 28, 2016

make my day tnx!

@shay1989

This comment has been minimized.

Copy link

commented Dec 20, 2016

Thanks!!!!!!!

@Mugane

This comment has been minimized.

Copy link

commented Oct 27, 2017

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

@Mugane

This comment has been minimized.

Copy link

commented Oct 27, 2017

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();
}
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.