Animate Placeholder Input Using jQuery and Bootstrap

Animate Placeholder Input Using jQuery and Bootstrap

How to create animates placeholder on form inputs to label using jquery and bootstrap

animateformlabelholder

Import Library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="phanimate.jquery.js"></script>

Make Content

  <div class="container">
    <form>
<div class="custom-input">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname">
</div>

<div class="custom-input">
  <label for="test">Test 1</label>
  <input type="text" class="form-control" id="test">
</div>

<div class="custom-input">
  <label for="test2">Test 2</label>
  <input type="text" class="form-control" id="test2" placeholder="test 2">
</div>

<div class="custom-input">
  <label>Test 3</label>
  <input type="text" class="form-control" placeholder="Placeholder 3">
</div>

<div class="custom-input">
  <label>Test 4</label>
  <input type="text" class="form-control">
</div>

<div class="custom-input">
  <input type="text" class="form-control" placeholder="Test 5">
</div>
  </form>
  </div>

 

Tags: , , , , ,