Membuat format mata uang rupiah pada input form

9 Jan 2018 — Pemrograman

Tampilan formulir input HTML dengan format mata uang Rupiah otomatis pada aplikasi web.

Salah satu user experience yang baik pada sebuah aplikasi adalah format input form yang sesuai dengan tipe data yang di-inputkan. Contohnya apabila data yang di-inputkan berupa mata uang rupiah, maka input juga menunjukkan format rupiah.

Untuk membuat format input seperti itu kita bisa memanfaatkan plugin jQuery Mask — plugin jQuery untuk melakukan masking input, baik berupa format mata uang, nomor HP, IP address, dan lain sebagainya.

Siapkan terlebih dahulu file jQuery di sini dan jQuery Mask di sini.

Langkah-langkahnya:

Buat folder baru pada htdocs, misalnya latihan
Copy file jquery.min.js dan jquery.mask.min.js yang sudah didownload ke folder latihan
Buat file baru bernama index.html lalu isi dengan kode berikut:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Custom Format pada Input Form</title>
  </head>
  <style>
      .container {
          font-family: 'Roboto', Arial, Sans-serif;
          font-size: 16px;
          font-weight: 400;
          left: 50%;
          position: absolute;
          top: 0;
          transform: translate(-50%, 5%)
      }
      .group {
          display: block;
          margin-bottom: 1.5em
      }
      label {
          float: left;
          width: 75px;
      }
      input {
          border: 2px solid #ddd;
          border-radius:4px;
          font-family: 'Roboto', Arial, Sans-serif;
          font-size: 16px;
          outline: none;
          padding: .5em 1em;
      }
  </style>
  <body>
      <div class="container">
          <h3>Custom Format Input</h3>
          <br>
          <form action="#" method="post">
              <div class="group">
                  <label>Rp</label>
                  <input type="text" class="uang">
              </div>
          </form>
      </div>
      <script src="jquery.min.js"></script>
      <script src="jquery.mask.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){

              // Format mata uang.
              $( '.uang' ).mask('000.000.000', {reverse: true});

          })
      </script>
  </body>
</html>

Lihat hasilnya di browser dengan mengakses http://localhost/latihan/

Untuk kustom format lainnya bisa dilihat di dokumentasi jQuery Mask.