Tutorial Membuat Format Rupiah pada Input HTML

Kategori: JavaScript

Selain fungsi yang berjalan dengan baik, programmer perlu mempertimbangkan user experience yang baik agar aplikasi tersebut mudah digunakan oleh end user.

Salah satu user experience yang bagus pada sebuah aplikasi adalah format input form yang sesuai dengan tipe data yang diinputkan.

Contohnya apabila data yang diinputkan berupa mata uang rupiah, maka input juga menunjukkan format rupiah.

Untuk membuat format input seperti itu kita bisa memanfaatkan plugin jQuery Mask.

jQuery Mask adalah sebuah plugin jQuery yang digunakan untuk melakukan masking input, baik berupa format mata uang, nomor hp, ip address dan lain sebagainya.

Oke langsung saja, berikut adalah tutorial kustom format input mata uang rupiah.

Sebelum kita membuat kustom format input, siapkan dulu file jquery dan jquery mask.

Silakan download dulu file jquery di sini dan jquery mask di sini.

Jika sudah lanjut ke tutorialnya.

  • Buat folder baru pada htdocs misalnya latihan (folder html jika Anda menggunakan Linux)
  • Lalu copy file jquery.min.js dan jquery.mask.min.js yang sudah kita download tadi dan paste pada folder latihan
  • Setelah itu buat file baru bernama index.html lalu isi kode di bawah ini

  • Kemudian simpan dan lihat hasilnya.

Sedikit penjelasan tentang kode di atas.

  • Pada baris ke 45 dan 46 adalah kode untuk memanggil file jquery dan jquery mask. Kustom format input ini tidak dapat berfungsi tanpa jquery.
  • Pada baris ke 51 berfungsi untuk menentukan format input rupiah menggunakan selector .uang. Selain format mata uang bisa juga dengan format lainnya seperti nomor hp dan format lainnya.

Untuk kustom format lainnya bisa dilihat di sini

Demo Kustom Input Form

Sangat mudah bukan?

Selamat mencoba dan semoga bermanfaat. Simak juga Tutorial Membuat Autocomplete dengan PHP dan MySQLi

Diposting pada Feb 18, 2018