title: Form Rise-Input and repeat the text while filling CSS
body: <p>I have a form which currently works fine, only thing I would like it to do is when I fill the text, the placeholder also should show whatever I type in the field.</p>
  
  <p>Lets say if I am filling First Name:
  Bob The Builder, the place holder should also show the same 'Bob The Builder' instead of 'First Name'.</p>
  
  <p>Below is the related code to it:</p>
  
  <p><a href="https://jsfiddle.net/tyowcgut/1/" rel="nofollow noreferrer">Form-rise-click here for fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
    &lt;div&gt;
      &lt;label for="fname"&gt;First Name&lt;/label&gt;
      &lt;input id="fname" type="text" class="cool"/&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="lname"&gt;Last Name&lt;/label&gt;
      &lt;input id="lname" type="text" class="cool"/&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="email"&gt;Email&lt;/label&gt;
      &lt;input id="email" type="text" class="cool"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    font-family: 'Lato', sans-serif;
    color: black;
    background-color: white;
  }
  h1 {
    font-size: 60px;
    margin: 0px;
    padding: 0px;
  }
  h3 {
    margin: 0px;
    padding: 0px;
    color: #999;
  }
  
  div.wrap {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: middle;
  }
  
  div.wrap div {
    position: relative;
    margin: 50px 0;
  }
  
  label {
    position: absolute;
    top: 0;
    font-size: 30px;
    margin: 10px;
    padding: 0 10px;
    background-color: white;
    -webkit-transition: top .2s ease-in-out, 
                        font-size .2s ease-in-out;
    transition: top .2s ease-in-out, 
                font-size .2s ease-in-out;
  }
  
  .active {
    top: -25px;
    font-size: 20px;
  }
  
  input[type=text] {
    width: 100%;
    padding: 20px;
    border: 2px solid black;
    font-size: 20px;
    background-color: white;
    color: black;
  } 
  
  input[type=text]:focus {
    outline: none;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('input').on('focusin', function() {
    $(this).parent().find('label').addClass('active');
  });
  
  $('input').on('focusout', function() {
    if (!this.value) {
      $(this).parent().find('label').removeClass('active');
    }
  });
  </code></pre>