<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="div-container"> <div class="div-heading"> <h3 class="text-center heading">Float Label With Easy JavaScript</h3> </div> <div class="div-content"> <a class="btn btn-square-toround btn-xl btn-bordered-primary" data-toggle="modal" data-target="#floatLabelDemo-UP"><span class="glyphicon glyphicon-chevron-up"></span> UP</a> <a class="btn btn-square-toround btn-xl btn-bordered-success" data-toggle="modal" data-target="#floatLabelDemo-DOWN"><span class="glyphicon glyphicon-chevron-down"></span> DOWN</a> <a class="btn btn-square-toround btn-xl btn-bordered-info" data-toggle="modal" data-target="#floatLabelDemo-LEFT"><span class="glyphicon glyphicon-chevron-left"></span> LEFT</a> <a class="btn btn-square-toround btn-xl btn-bordered-warning" data-toggle="modal" data-target="#floatLabelDemo-RIGHT"><span class="glyphicon glyphicon-chevron-right"></span> RIGHT</a> <div style="border:1px solid #F0AD4E;border-left:4px solid #F0AD4E; padding:10px 16px;margin-bottom:30px;;margin-top:30px;border-radius:3px 6px 6px 3px"> FOR THE DESIGNING PART<hr> This is just based on placeholder attribute of your input element.<br> Put the <kbd>label="..."</kbd> attribute insted of placeholder if the element does not support placeholder attribute. </div> <div style="border:1px solid #D9534F;border-left:4px solid #D9534F; padding:10px 16px;border-radius:3px 6px 6px 3px"> FOR THE CODING PART (in Javascript)<hr> The Label is Shown or Hide by onfocus() & onblur() method of that element.<br> If you work on any of that method you need to call manually in your code as below<br> <kbd>onfocus() --> floatLabel(this)</kbd><br> <kbd>onblur() --> hideLabel(this,lblMessae)</kbd> </div> </div> </div> <!-- Lable Animate Up Modal --> <div class="modal fade" id="floatLabelDemo-UP" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="gridSystemModalLabel">Float Label | Animate UP</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="form-group float-label"> <label class="label-AnimateUp"></label> <input type="email" class="form-control label-input" placeholder="Email"> </div> <div class="form-group float-label"> <label class="label-AnimateUp"></label> <input type="password" class="form-control label-input" placeholder="Password"> </div> <div class="form-group"> <button type="button" class="btn btn-bordered-primary">LogIn</button> <button type="button" class="btn btn-bordered-warning" data-dismiss="modal">Cancel</button> </div> </div> </div> <div class="modal-footer"> By <kbd>V!j@Y</kbd> </div> </div> </div> </div> <!-- Lable Animate Down Modal --> <div class="modal fade" id="floatLabelDemo-DOWN" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="gridSystemModalLabel">Float Label | Animate Down</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="form-group float-label"> <label class="label-AnimateDown"></label> <input type="email" class="form-control label-input" placeholder="Email"> </div> <div class="form-group float-label"> <label class="label-AnimateDown"></label> <input type="password" class="form-control label-input" placeholder="Password"> </div> <div class="form-group"> <button type="button" class="btn btn-bordered-primary">LogIn</button> <button type="button" class="btn btn-bordered-warning" data-dismiss="modal">Cancel</button> </div> </div> </div> <div class="modal-footer"> By <kbd>V!j@Y</kbd> </div> </div> </div> </div> <!-- Lable Animate Left Modal --> <div class="modal fade" id="floatLabelDemo-LEFT" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="gridSystemModalLabel">Float Label | Animate Left</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="form-group float-label"> <label class="label-AnimateLeft"></label> <input type="email" class="form-control label-input" placeholder="Email"> </div> <div class="form-group float-label"> <label class="label-AnimateLeft"></label> <input type="password" class="form-control label-input" placeholder="Password"> </div> <div class="form-group"> <button type="button" class="btn btn-bordered-primary">LogIn</button> <button type="button" class="btn btn-bordered-warning" data-dismiss="modal">Cancel</button> </div> </div> </div> <div class="modal-footer"> By <kbd>V!j@Y</kbd> </div> </div> </div> </div> <!-- Lable Animate Right Modal --> <div class="modal fade" id="floatLabelDemo-RIGHT" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="gridSystemModalLabel">Float Label | Animate Right</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="form-group float-label"> <label class="label-AnimateRight"></label> <input type="email" class="form-control label-input" placeholder="Email"> </div> <div class="form-group float-label"> <label class="label-AnimateRight"></label> <input type="password" class="form-control label-input" placeholder="Password"> </div> <div class="form-group"> <button type="button" class="btn btn-bordered-primary">LogIn</button> <button type="button" class="btn btn-bordered-warning" data-dismiss="modal">Cancel</button> </div> </div> </div> <div class="modal-footer"> By <kbd>V!j@Y</kbd> </div> </div> </div> </div>

/*Hide Label On DOM Load By CSS*/ .float-label>label{display:none} .div-container{border:1px solid #428BCA;margin:30px;border-radius:20px 20px 0px 0px} .div-heading{border-bottom:1px dashed #5BC0DE;padding-top:15px;padding-bottom:15px;margin:0px;background-color:#F5F5F5;border-radius:19px 19px 0px 0px} .heading{color:#5FC9E5} .div-content{padding:30px} .btn{transition:all 0.8s;-o-transition:all 0.8s;-moz-transition:all 0.8s;-webkit-transition:all 0.8s;border-radius:0px;margin-top:10px} .btn-rounded{border-radius:50px} .btn-round-tosquare:hover{border-radius:0px} .btn-square-toround:hover{border-radius:50px} .btn-bordered-primary{color:#428BCA;background:#FFFFFF;border:2px solid #428BCA} .btn-bordered-primary:hover{color:#FFFFFF;background:#428BCA;border:2px solid #FFFFFF} .btn-bordered-success{color:#5CB85C;background:#FFFFFF;border:2px solid #5CB85C} .btn-bordered-success:hover{color:#FFFFFF;background:#5CB85C;border:2px solid #FFFFFF} .btn-bordered-info{color:#5BC0DE;background:#FFFFFF;border:2px solid #5BC0DE} .btn-bordered-info:hover{color:#FFFFFF;background:#5BC0DE;border:2px solid #FFFFFF} .btn-bordered-warning{color:#F0AD4E;background:#FFFFFF;border:2px solid #F0AD4E} .btn-bordered-warning:hover{color:#FFFFFF;background:#F0AD4E;border:2px solid #FFFFFF} .btn-bordered-danger{color:#D9534F;background:#FFFFFF;border:2px solid #D9534F} .btn-bordered-danger:hover{color:#FFFFFF;background:#D9534F;border:2px solid #FFFFFF} .btn-xl { padding: 10px 16px; font-size: 24px; line-height: 1.33; } /*Animate Label Left*/ @-webkit-keyframes labAnimateLeft{0%{-webkit-transform: translateY(30px);transform: translateY(30px)}} @keyframes labAnimateLeft{0%{-webkit-transform: translateX(30px);-ms-transform: translateX(30px);transform: translateX(30px)}} .label-AnimateLeft{-webkit-animation: labAnimateLeft 0.8s ease;animation: labAnimateLeft 0.8s ease} /*Animate Label Right*/ @-webkit-keyframes labAnimateRight{0%{-webkit-transform: translateY(-30px);transform: translateY(-30px)}} @keyframes labAnimateRight{0%{-webkit-transform: translateX(-30px);-ms-transform: translateX(-30px);ransform: translateX(-30px)}} .label-AnimateRight{-webkit-animation: labAnimateRight 0.8s ease;animation: labAnimateRight 0.8s ease} /*Animate Label Up*/ @-webkit-keyframes labAnimateUp{0%{-webkit-transform: translateY(20px);transform: translateY(20px)}} @keyframes labAnimateUp{0%{-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px)}} .label-AnimateUp{-webkit-animation: labAnimateUp 0.8s ease;animation: labAnimateUp 0.8s ease} /*Animate Label Down*/ @-webkit-keyframes labAnimateDown{0%{-webkit-transform: translateY(-20px);transform: translateY(-20px)}} @keyframes labAnimateDown{0%{-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px)}} .label-AnimateDown{-webkit-animation: labAnimateDown 0.8s ease;animation: labAnimateDown 0.8s ease}

function floatLabel(element) { var labelValue = ''; element.parentElement.firstElementChild.style="display:inline-block"; var labelValue = element.getAttribute("placeholder"); if(labelValue) { element.parentElement.firstElementChild.innerHTML = labelValue; element.setAttribute('placeholder',''); } else { labelValue = element.getAttribute("label"); if(labelValue) { element.parentElement.firstElementChild.innerHTML = labelValue; } } element.setAttribute('onblur','return hideLabel(this,\''+labelValue+'\')'); } function hideLabel(element,lab) { element.parentElement.firstElementChild.style = "display:none"; element.setAttribute('placeholder',lab); } window.onload = function() { var classname = document.getElementsByClassName("label-input"); for (var i = 0; i < classname.length; i++) { classname[i].setAttribute('onfocus','return floatLabel(this)'); } }