Input Number di HTML

Selain text biasa, sebuah formulir juga biasa berisi data yang isiannya berupa angka. Contoh seperti mengisi umur, mengisi nilai ujian dan lainnya. Gunakan type number pada tag input.

Contoh input angka (number)

<input type='number'>

Yang menghasilkan

Coba klik kotaknya 👆🏼 dan ketik sesuatu.
Jika mengisi huruf, maka tidak akan terlihat apa-apa.
Coba sekarang masukkan angka.

Nilai contoh dengan atribut placeholder

Kita bisa memberi petunjuk atau contoh dari isian numbernya, dengan atribut placeholder

<input type='number' placeholder='umur kamu'>

Yang menghasilkan

Nilai default dengan atribut value

Kita bisa memberi nilai otomatis dari isian numbernya, dengan atribut value. Pastikan value berisi angka

<input type='number' value='100'>

Yang menghasilkan

Memberi batas minimal dan maksimal

Kita bisa membatasi input yang dimasukkan oleh user dengan bantuan atribut min dan atribut max. Boleh hanya salah satu atau keduanya.

Contoh di bawah, kita buat input angka dengan minimal 10 dan maksimal 100

<input type='number' min='10' max='100'>

Silahkan coba masukkan angka di bawah 10 atau di atas 100. Maka akan muncul pesan error yang menandakan batas angkanya.

Jika angkanya di antara 10 dan 100, maka tidak terjadi apa-apa.

Atribut step untuk menentukan jumlah langkah

Jika menekan tombol panah di sebelah kanan input, kita bisa menaikkan angka secara otomatis atau menguranginya “1 langkah”. Contoh jika input 5, maka tombol naik menjadi 6, tombol turun menjadi 4.

Contoh tombol 1 langkah (tekan panah di kotaknya)

Kita bisa menaikkan dan mengurangi sesuai jumlah yang kita mau dengan memasukkan atribut step.

<input type='number' value='5' step='5'>

Di atas kita memasukkan atribut step bernilai 5, yang artinya jika kita memainkan panahnya sekarang, akan otomatis naik atau turun 5.