Program HTML Input Type Number

Hello guys, Berjumpa dengan Miniblog dari Inzaghi's Blog! Kali ini kita akan membuat Program HTML Input Type untuk memasukkan Bilangan/Angka.

Sumber : Dosenit.com, Jagongoding.com, Javatpoint.com, dan W3schools.com

Tipe number ini membatasi isian user hanya pada karakter numerik saja. Sehingga user tidak bisa mengisi karakter huruf, karakter putih, dan lain sebagainya.

Plus : Browser akan menambahkan dua buah tombol atas dan bawah untuk mengubah angka isian.

Contoh :

<label for="isian-usia">Masukkan Usia Anda!</label><br />
<input id="isian-usia" type="number" name="usia" min="18" max="60" />

Output :

Masukkan Usia Anda!

Catatan : selain mengeklik tombol atas dan bawah, kita juga bisa menggunakan tombol navigasi atas bawah di keyboard untuk mengubah angka.

Beberapa atribut untuk type number :

• min - menentukan angka minimal
• max - menentukan angka maksimal
• step - menentukan kelipatan (nilai yang tidak sesuai kelipatan tidak bisa di-input, dan default dari atribut ini adalah 1)

Contoh (Penggunaan atribut step) :

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>
<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

Output :

Kelipatan 1000


Kelipatan 0.5

Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)