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

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