<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 ----------> <br><br><br> <div class="col-md-6 col-md-offset-3"> <h1>Form, Placeholder with Label</h1> <div class="form-group"> <label for="usr">Name</label> <input type="text" class="form-control" id="usr" placeholder="Name"> </div> <div class="form-group"> <label for="pwd">Password</label> <input type="password" class="form-control" id="pwd" placeholder="Password"> </div> <div class="form-group"> <label for="comments">Comments</label> <textarea class="form-control" id="comments" placeholder="Comments"></textarea> </div> </div>

input.form-control{ height: 40px; } label{ position: absolute; margin-left: 12px; margin-top: 2px; font-size: 9pt; opacity: .7; display: none}

$('input, textarea').on('change keyup paste', function(){ var $this=$(this); if($this.val()){ if(!$this.hasClass('inputed')){ $this.animate({'padding-top': '20px'}).parent().find('label').slideToggle(); $this.addClass('inputed'); } } else $this.removeClass('inputed').animate({'padding-top': '5px'}).parent().find('label').hide(); });