Home HTML Menerima Inputan Hanya Angka di HTML

Menerima Inputan Hanya Angka di HTML

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 ^-^

Bayu S. Ajie P. Putrahttps://www.bayusapp.com/
"The only way to do great work is to love what you do" - Steve Jobs

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Sublime Text 3.2.2 Build 3211 Full Crack

Sublime Text 3.2.2 Build 3211 Full Crack - Sublime Text 3.2.2 Build 3211 adalah salah satu dari sekian text editor yang sampai saat ini...

Membuat Auto Close (Auto Dismiss) Bootstrap Alerts

Membuat Auto Close (Auto Dismiss) Bootstrap Alerts - Pesan pemberitahuan atau notificication biasanya digunakan dalam sebuah aplikasi atau website untuk memberitahu suatu aksi yang...

Struktur Folder CodeIgniter Beserta Fungsinya

Struktur Folder CodeIgniter Beserta Fungsinya - Dalam artikel sebelumnya berjudul Pengenalan dan Pengertian CodeIgniter telah dibahas apa itu CodeIgniter, metode yang digunakan, serta keuntungan...

Cara Force HTTP ke HTTPS di CodeIgniter

Cara Force HTTP ke HTTPS di CodeIgniter - Dalam pengembangan dan penggunaan suatu website yang diletakan ke dalam hosting sudah hal wajar jika melakukan...

Recent Comments