HTML Form Input Dengan Koma Pemisah Untuk Harga

By Posted on
HTML Form Input Dengan Koma Pemisah Untuk Harga
Contoh HTML Form Input Dengan Koma Pemisah Untuk Harga


Form input adalah salah satu komponen penting dalam pembuatan website yang memungkinkan pengguna untuk mengisi informasi. Dalam beberapa kasus, seperti ketika kita ingin mengumpulkan data harga atau angka lainnya, penting untuk membatasi input hanya pada angka dengan koma untuk menggambarkan desimal. Artikel ini akan membahas cara membuat form input yang hanya menerima nomor dan dipisah oleh koma untuk keperluan harga menggunakan HTML dan JavaScript.

1. Membuat Form HTML

Kita akan memulai dengan membuat form HTML sederhana yang akan menerima input harga dari pengguna.

<!DOCTYPE html>
<html>
<head>
    <title>Form Harga</title>
</head>
<body>
    <form id="hargaForm">
        <label for="harga">Harga:</label>
        <input type="text" id="harga" name="harga" placeholder="Masukkan harga..." oninput="validasiHarga(this)">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Dalam kode di atas, kita memiliki elemen input dengan id “harga” dan menggunakan atribut “oninput” untuk memanggil fungsi JavaScript “validasiHarga()” setiap kali pengguna memasukkan sesuatu ke dalam input.

2. Validasi Input dengan JavaScript

Selanjutnya, kita akan menambahkan JavaScript untuk melakukan validasi input agar hanya menerima angka dan koma.

Misalnya kita ketik angka “10000” secara otomatis menjadi format “10.000”. Sehingga dengan ini dapat memudahkan pengguna untuk melihat nominal harga yang ingin dimasukkan. Berikut adalah kodenya: 

<script>
function validasiHarga(input) {
    // Menghapus karakter selain angka dan koma
    input.value = input.value.replace(/[^0-9,]/g, '');

    // Pastikan hanya satu koma yang diperbolehkan
    if ((input.value.match(/,/g) || []).length > 1) {
        input.value = input.value.slice(0, -1);
    }

    // Mengubah format input menjadi format angka yang diinginkan
    const valueAsNumber = parseFloat(input.value.replace(/,/g, ''));

    // Menggunakan metode toLocaleString() untuk menampilkan angka dengan format "10.000"
    if (!isNaN(valueAsNumber)) {
        input.value = valueAsNumber.toLocaleString('id-ID');
    }
}
</script>


3. Uji coba

Sekarang, form input kita sudah dapat menerima angka dengan koma untuk keperluan harga. Pengguna hanya bisa memasukkan karakter yang valid. Silahkan masukkan beberapa angka pada form input berikut: Form Harga



Semoga artikel HTML Form Input Dengan Koma for Harga ini bermanfaat.