Input Angka HTML: min, max, step, Desimal, dan valueAsNumber

HTML input type="number" menerima kuantitas yang dapat dibandingkan atau ditambahkan. min dan max menetapkan rentang, dan step menetapkan interval yang valid. Mengizinkan desimal membutuhkan pertimbangan baik interval maupun dasarnya; nomor telepon atau kode pos yang terlihat seperti numerik umumnya memerlukan jenis input lain.

min · max · step

min dan max tidak selalu mencegah penulisan angka di luar jangkauan. Bahkan jika nilai yang tidak valid dapat dimasukkan, pengiriman formulir biasa diblokir oleh validasi. Tambahkan required jika nilai tidak boleh kosong.

Langkah dasar adalah nilai min yang valid jika ada, jika tidak, atribut value HTML yang valid, atau nol jika keduanya tidak ada. Nilai yang valid adalah jumlah langkah bulat dari basis itu. Interval default adalah 1, tetapi basis desimal dapat menghasilkan nilai desimal yang valid, sehingga default tidak secara universal melarang desimal.

Bandingkan input integer dan desimal dalam satu contoh

Simpan kode lengkap ini sebagai number.html dan buka di browser. Tanpa server, bandingkan validasi, string yang dikirim, dan nilai numerik JavaScript untuk kuantitas dan berat. Latihan ini menentukan berat sebagai 0–100 kg dalam kenaikan 0,01 kg.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rentang dan langkah angka</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { width: 12rem; max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Masukkan jumlah dan berat</h1>
  <form id="demo">
    <label for="quantity">Jumlah (1–10, unit bulat)</label>
    <input id="quantity" name="quantity" type="number"
      min="1" max="10" step="1" value="2" required>
    <label for="weight">Berat (0–100 kg, langkah 0,01 kg)</label>
    <input id="weight" name="weight" type="number"
      min="0" max="100" step="0.01" value="1.25" required>
    <p><button type="submit">Tampilkan nilai</button>
      <button type="reset">Atur ulang</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const quantity = document.querySelector('#quantity');
    const weight = document.querySelector('#weight');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify({
        formData: [...new FormData(form).entries()],
        numbers: { quantity: quantity.valueAsNumber, weight: weight.valueAsNumber }
      }, null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Kirim nilai awal. formData (string): "2", "1.25"; numbers (angka): 2, 1.25.
2. Tetapkan kuantitas ke 11 dan kirim untuk memicu validasi maksimum. Tetapkan ke 2,5 untuk validasi langkah, atau kosongkan untuk validasi wajib. Kembalikan kuantitas ke 2.
3. Berat 1,23 dapat dikirim, tetapi 1,234 tidak sesuai interval. Format tempat desimal tetap berbeda dari interval numerik yang valid.
4. Ubah hanya step="1" jumlah menjadi step="3" dan buka kembali file. Karena min="1", nilai awal 2 tidak valid tetapi 4 valid. Kembalikan langkah ke 1 setelahnya.
5. Reset mengembalikan jumlah menjadi 2 dan berat menjadi 1,25 serta menghapus hasil.

Bedakan pengenal yang terlihat seperti angka

Nomor telepon, kode pos, dan ID keanggotaan seringkali perlu mempertahankan string aslinya daripada melakukan aritmatika. Nol di depan atau tanda hubung mungkin penting. Pertimbangkan type="tel" untuk telepon dan type="text" inputmode="numeric" untuk pengenal yang terlihat seperti angka. inputmode mengisyaratkan keyboard; ini bukan aturan validasi numerik.

Input angka tidak menggunakan maxlength atau pattern untuk membatasi jumlah digit atau pola ekspresi-reguler. Atur lebar dengan CSS alih-alih size. Browser berbeda dalam perilaku entri karakter, panah penambah, dan tampilan pemisah desimal, jadi jangan mengandalkan satu tampilan atau perilaku pemblokiran.

Tangani angka di JavaScript dan di server

input.value dan nilai yang dikirim melalui form biasa adalah string. Gunakan valueAsNumber untuk angka; ini mengembalikan NaN ketika kosong atau tidak dapat dikonversi. Mengonversi string kosong dengan Number() menghasilkan nol, jadi bedakan nilai kosong terlebih dahulu jika nilainya berbeda dari nol.

Validasi browser saja tidak membuat suatu nilai dapat dipercaya. Validasi format numerik, apakah nilainya berhingga, jangkauan, dan langkah juga harus dilakukan di server. Untuk perhitungan yang memerlukan akurasi desimal, seperti jumlah, pertimbangkan kesalahan floating-point biner JavaScript dan gunakan bilangan bulat dalam satuan mata uang terkecil atau pendekatan desimal yang sesuai.

Referensi input angka MDN menjelaskan atribut dan aturan dasar langkah.