JSFiddle - React, Tailwind, and code Playground

by peter

HTML

<form id="new_account_form" method="post" action="#" class="login-form">
<ul>
<li>
          <label for="user_email">Email address</label>
            <input id="user_email" name="user_email" required="" class="validate[required,custom[email]] clearOnFocus login-itext" type="text">
            </li>
            <li>
            <label for="user_password">Password</label>
            <input id="user_password" name="user_password" required="" class="validate[required,minSize[6]] clearOnFocus login-itext" type="password">
</li>
<li>

   <input name="Submit" type="submit" class="login-ibutton" value="Sign in"></li>
</ul>
</form>

JavaScript

this.label2value = function(){    

    // CSS class names
    // put any class name you want
    // define this in external css (example provided)
    var inactive = "inactive";
    var active = "active";
    var focused = "focused";
    
    // function
    $("label").each(function(){        
        obj = document.getElementById($(this).attr("for"));
        if(($(obj).attr("type") == "text", "password") || (obj.tagName.toLowerCase() == "textarea")){            
            $(obj).addClass(inactive);            
            var text = $(this).text();
            $(this).css("display","none");            
            $(obj).val(text);
            $(obj).focus(function(){    
                $(this).addClass(focused);
                $(this).removeClass(inactive);
                $(this).removeClass(active);                                  
                if($(this).val() == text) $(this).val("");
            });    
            $(obj).blur(function(){    
                $(this).removeClass(focused);                                                     
                if($(this).val() == "") {
                    $(this).val(text);
                    $(this).addClass(inactive);
                } else {
                    $(this).addClass(active);        
                };                
            });                
        };    
    });        
};
// on load
$(document).ready(function(){    
    label2value();    
});