Cara Membuat Form Input HTML Hanya Terisi Angka dengan Mudah

Satria Perwira    6/09/2018    Programming   

Artikel kali ini kita akan membahas bagaimana membuat form inputan hanya terisi angka pada html dengan bantuan javascript. Sebelumnya kita perlu tahu apa itu HTML, Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. (https://id.wikipedia.org/wiki/HTML)

Biasanya dalam membangun website tentu kita akan menyediakan formulir inputan yang bisa diisikan untuk menyimpan data dalam database. Dalam merancang database biasanya terdapat tipe data bertipe INT (integer) yang hanya dapat diisi angka, apabila disi huruf maka akan terjadi error / ketidak sesuaian data. Contohnya dalam penggunaan no telepon biasanya hanya berisikan angka.

Baik disini kita akan mengetahui bagaimana membuat formulir hanya berisikan angka, sehingga apabila diinputkan selain angka maka secara otomatis akan terhapus.

1. Pertama tentukan form input mana yang akan diterapkan hanya angka. (contoh dibawah)

No. Telepon : <input type="text" name="notelp"/>

* diatas merupakan kode form input dengan HTML

2. Tambahkan class dengan nama "numeric" sehingga akan menjadi seperti dibawah.

No. Telepon : <input type="text" class="numeric" name="notelp"/>

3. Tambahkan jquery (javascript) berikut diatas tag

<script type="text/javascript"> jQuery('.numeric').keyup(function () { this.value = this.value.replace(/[^0-9\.]/g,''); }); </script>

4. Pastikan sudah menambahkan library jquery.
5. Simpan
Silahkan cek hasilnya, maka akan secara otomatis ketika anda menginputkan selain angka formulir akan menolak inputan dan menghapusnya inputan selain angka secara otomatis.

Demikian tips Cara Membuat Form Input HTML Hanya Terisi Angka dengan Mudah, semoga bermanfaat bagi anda. Sampai ketemu di artikel selanjutnya dan jangan lupa KLIK IKLAN DIBAWAH atau DIATAS sehingga penulis lebih bersemangat dalam mengupdate artikel menarik. Terima kasih

oleh Dafizara