"Form Placeholder with Labels"
Bootstrap 3.3.0 Snippet by gcphost

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
input.form-control{ height: 40px; }
label{ position: absolute; margin-left: 12px; margin-top: 2px; font-size: 9pt; opacity: .7; display: none}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$('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();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: