Membuat Inputan Hanya Menerima Angka di HTML, Macam-macam input type dalam HTML cukup beragam, salah satunya adalah type number. Type number digunakan untuk menerima inputan dari user berupa angka saja. Hal ini digunakan untuk meminimalisir jika user melakukan input data yang tidak diinginkan. Sebagai contoh, jika ingin memasukkan data berupa nomor telepon maka tidak boleh mengandung huruf atau karakter lain selain angka atau suatu jumlah barang harus diinputkan berupa angka tidak boleh karakter lain. Untuk mengatasi hal itu cukup mudah, ada cara yang paling mudah hingga menggunakan JavaScript. Cara yang akan dibagikan dalam artikel ini terdapat tiga cara, yaitu: menggunakan tag dasar dari HTML, menggunakan pattern, dan menggunakan JavaScript.

  1. Tag dasar HTML
    <!DOCTYPE html>
<html>
  <head>
    <title>Input Angka - bayusapp.com</title>
  </head>
  <body>
    <form method="post" action="#">
      <input type="number" name="angka" placeholder="Input Angka">
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

    Pada source code diatas terdapat code <input type=”number” name=”angka” placeholder=”Input Angka”> merupakan contoh penggunakan syntax dasar dari HTML yaitu type number. Pada saat melakukan input data maka input field tersebut hanya akan menerima angka saja meskipun user melakukan input berupa huruf atau karakter lain dan akan menampilkan hasil inputan hanya angka.

  2. Pattern
    <!DOCTYPE html>
<html>
  <head>
    <title>Input Angka - bayusapp.com</title>
  </head>
  <body>
    <form method="post" action="#">
    	<input type="text" name="angka" pattern="[0-9]" placeholder="Input Angka">
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

    Pada source code diatas terdapat atribut pattern dalam code <input type=”text” name=”angka” pattern=”[0-9]” placeholder=”Input Angka”>. Yang dimaksud pattern=”[0-9]” adalah inputan hanya menerima angka atau karakter 0 sampai 9. Meskipun saat melakukan input huruf atau karakter khusus akan tetap terinput, tapi saat dikirim akan menampilkan pesan yang kurang lebih berisi “Sesuaikan format yang diminta”. Sehingga saat dikirim atau submit tidak akan bisa karena format yang diminta atau inputnya tidak sesuai.

  3. JavaScript
    <!DOCTYPE html>
<html>
  <head>
    <title>Input Angka - bayusapp.com</title>
  </head>
  <body>
    <form method="post" action="#">
    	<input type="text" name="angka" placeholder="Input Angka" onkeypress="return hanyaAngka(event)">
      <button type="submit">Submit</button>
    </form>
    <script>
    	function hanyaAngka(event) {
    		var angka = (event.which) ? event.which : event.keyCode
    		if (angka != 46 && angka > 31 && (angka < 48 || angka > 57))
    			return false;
    		return true;
    	}
    </script>
  </body>
</html>

    Pada source code diatas terdapat atribut onkeypress=”return hanyaAngka(event)” dalam code <input type=”text” name=”angka” placeholder=”Input Angka” onkeypress=”return hanyaAngka(event)”>. Maksud dari atribut onkeypress adalah pada saat user melakukan input apapun (saat menekan keyboard), secara langsung akan memproses inputan user melalui function yang telah dibuat dalam bahasa JavaScript. Function tersebut berisi suatu code untuk melakukan pengecekan apakah input dari user tersebut berupa angka atau tidak. Jika input berupa angka, maka input tersebut akan diterima. Dan jika input selain angka, maka input tersebut tidak akan diterima.

Untuk demo dari source code diatas seperti dibawah ini

Happy Coding ^-^

RELATED ARTICLESMORE FROM AUTHOR