Membuat Form dengan Efek Animasi Placeholder

Pada kesempatan kali ini, kita akan membuat sebuah efek animasi dari sebuah form Bootstrap. Efek yang dibuat akan menggunakan trigger dari placeholder dari field input form.

Membuat File index.html

Form inputan akan dibuat dari Bootstrap 4. Form terdiri atas berbagai macam field input seperti field input nama, email, radio button, password, dan upload file gambar.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>Form User dengan Animated Placeholder</title>
</head>

<body>

  <div class="container py-4">
    <div class="row d-flex justify-content-center">
      <div class="col-md-8">
        <h1 class="mt-4"> Form User dengan Animated Placeholder</h1>
        <form action="" method="POST" enctype="multipart/form-data">

          <div class="form-group">
            <input name="nama" type="text" id="nama" class="form-control" placeholder="Nama lengkap">
          </div>

          <div class="form-group">
            <input type="email" name="email" id="email" class="form-control" placeholder="Email yang digunakan">
          </div>

          <fieldset class="form-group">
            <div class="row">
              <legend class="col-form-label col-sm-2 pt-0 text-muted">Level User</legend>
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="administrator" id="administrator" value="option1"
                    checked>
                  <label class="form-check-label" for="administrator">
                    Administrator
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="writer" id="writer" value="option2">
                  <label class="form-check-label" for="writer">
                    Writer
                  </label>
                </div>
              </div>
            </div>
          </fieldset>

          <div class="form-group">
            <input type="password" name="password" id="password" class="form-control" placeholder="Password ">
          </div>

          <div class="form-group">
            <input type="password" name="password2" id="password2" class="form-control" placeholder="Password diulangi">
          </div>

          <div>
            <br><img width="360px" height="235px" id="prev">
          </div>
          <div class="form-group">
            <label for="upload">Upload file</label>
            <input type="file" class="form-control-file" name="upload" id="preview" aria-describedby="fileHelpId"
              onChange="loadFile(event)">

            <script>
              var loadFile = function (event) {
                var output = document.getElementById('prev');
                output.src = URL.createObjectURL(event.target.files[0]);
                output.onload = function () {
                  URL.revokeObjectURL(output.src)
                  // free memory
                }
              };
            </script>
          </div>
          <button class="btn btn-success btn-lg float-right" type="submit">Kirim.</button>
        </form>
      </div>
    </div>
  </div>




  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
  </script>
</body>

</html>

Selanjutnya, unduhkah plugin Javascript untuk menangani animasinya. Pergi ke github.com lalu unduh file zipnya. Ekstak file zip tersebut lalu rename folder sesuai dengan kebutuhan.

Konfigurasi File index.html dengan File Javascript Placeholder

Pada folder yang baru di rename terdapat sebuah file yang bernama src. Di dalam folder ini terdapat 2 buah file yaitu jquery.placeholder.label.js dan jquery.placeholder.label.min.js. Kita hanya perlu menghubungkan file index.html dengan salah satu file Javacript tersebut.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>Form User dengan Animated Placeholder</title>
</head>

<body>

  <div class="container py-4">
    <div class="row d-flex justify-content-center">
      <div class="col-md-8">
        <h1 class="mt-4"> Form User dengan Animated Placeholder</h1>
        <form action="" method="POST" enctype="multipart/form-data">

          <div class="form-group">
            <input name="nama" type="text" id="nama" class="form-control" placeholder="Nama lengkap">
          </div>

          <div class="form-group">
            <input type="email" name="email" id="email" class="form-control" placeholder="Email yang digunakan">
          </div>

          <fieldset class="form-group">
            <div class="row">
              <legend class="col-form-label col-sm-2 pt-0 text-muted">Level User</legend>
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="administrator" id="administrator" value="option1"
                    checked>
                  <label class="form-check-label" for="administrator">
                    Administrator
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="writer" id="writer" value="option2">
                  <label class="form-check-label" for="writer">
                    Writer
                  </label>
                </div>
              </div>
            </div>
          </fieldset>

          <div class="form-group">
            <input type="password" name="password" id="password" class="form-control" placeholder="Password ">
          </div>

          <div class="form-group">
            <input type="password" name="password2" id="password2" class="form-control" placeholder="Password diulangi">
          </div>

          <div>
            <br><img width="360px" height="235px" id="prev">
          </div>
          <div class="form-group">
            <label for="upload">Upload file</label>
            <input type="file" class="form-control-file" name="upload" id="preview" aria-describedby="fileHelpId"
              onChange="loadFile(event)">

            <script>
              var loadFile = function (event) {
                var output = document.getElementById('prev');
                output.src = URL.createObjectURL(event.target.files[0]);
                output.onload = function () {
                  URL.revokeObjectURL(output.src)
                  // free memory
                }
              };
            </script>
          </div>
          <button class="btn btn-success btn-lg float-right" type="submit">Kirim.</button>
        </form>
      </div>
    </div>
  </div>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
  </script>

  <!-- Placeholder JavaScript -->
  <script src="src/jquery.placeholder.label.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $('input[placeholder]').placeholderLabel();
    })
  </script>

</body>
</html>

Tambahkan tag Javascript pada posisi sebelum </body></html>. Hasil akhir dari form kita akan seperti berikut :

KIta bisa mengatur warna dan ukuran font dari placeholder ataupun yang lain dengan cara mengedit file placeholder.label.js dan edit pada bagian

      var settings = $.extend({
            // These are the defaults.
            placeholderColor: "#dc6544",
            labelColor: "#b62ca4",
            labelSize: this.css('font-size'),
            fontStyle: "normal",
            useBorderColor: true,
            inInput: true,
            timeMove: 120
        },

Selesai. Semoga bermanfaat, terima kasih.