inputnumberrangeMenengah3 mnt baca

Input Number dan Range

Input number dengan min, max, dan step plus slider range: contoh nyata jumlah barang dan rating kepuasan.

Masalahnya: Angka Bukan Sekadar Teks

Kolom "jumlah barang" yang memakai type="text" mengundang masalah: pengguna mengetik "dua", "2,5", atau "-3" untuk stok yang tidak mungkin negatif. type="number" dan type="range" menyelesaikan ini di level input: browser menolak yang bukan angka, menyediakan kontrol naik-turun atau geser, dan memunculkan keyboard angka di HP.

Keduanya untuk angka, tapi untuk kebutuhan berbeda: number untuk nilai tepat yang penting (jumlah, harga), range untuk nilai perkiraan yang wajar (rating, volume, kecerahan).

type="number": Tepat dan Terbatas

html

<label>Jumlah:
  <input type="number" name="jumlah" min="1" max="10" value="1" />
</label>

Tiga atribut pengendalinya:

min dan max: batas bawah dan atas. Nilai di luar batas ditolak saat submit.
step: lompatan tiap klik tombol naik-turun. Default 1. Untuk desimal, pakai step="0.5" atau step="any" (bebas desimal apa pun).
value: nilai awal, juga harus menghormati min, max, dan step.

Browser desktop menampilkan tombol spinner (panah naik-turun) di sisi field, dan HP memunculkan keyboard angka. Contoh nyata form pemesanan:

html

<form action="/pesan" method="post">
  <p>
    <label for="jml">Jumlah kopi (1-20):</label><br />
    <input type="number" id="jml" name="jumlah"
           min="1" max="20" step="1" value="1" required />
  </p>
  <p>
    <label for="berat">Berat biji per bungkus (kg):</label><br />
    <input type="number" id="berat" name="berat"
           min="0.25" max="5" step="0.25" value="1" />
  </p>
  <p><button type="submit">Pesan</button></p>
</form>

Perhatikan step="0.25" pada berat: tanpa itu, nilai 0.5 ditolak karena bukan kelipatan 1 dari min. Ini jebakan paling umum pada input desimal.

type="range": Geser, Bukan Ketik

range menampilkan slider. Cocok saat nilai pastinya tidak penting, yang penting rentangnya:

html

<label for="puas">Seberapa puas? (1-5)</label><br />
<input type="range" id="puas" name="rating"
       min="1" max="5" step="1" value="3" />

Tanpa min/max, range default ke 0-100. step="1" membuat slider berhenti di bilangan bulat, enak untuk rating bintang. Nilai awal value="3" menempatkan tuas di tengah, jangan biarkan default 0 kalau 0 bukan pilihan yang masuk akal.

Slider sendiri tidak menampilkan angkanya secara visual. Untuk form nyata, pasangkan dengan elemen <output> dan sedikit JavaScript agar pengguna melihat nilai yang dipilih. Struktur HTML-nya tetap seperti di atas; JavaScript hanya untuk tampilan angka.

Kesalahan Umum: Salah vs Benar

html

<!-- SALAH: nomor HP pakai number, nol di depan hilang + muncul spinner -->
<input type="number" name="hp" placeholder="08xx" />

<!-- BENAR: nomor HP itu teks (pakai tel), bukan angka hitungan -->
<input type="tel" name="hp" placeholder="08xx-xxxx-xxxx" />

<!-- SALAH: step default 1 menolak desimal -->
<input type="number" name="berat" min="0" max="5" value="0.5" />

<!-- BENAR: step disesuaikan dengan kebutuhan desimal -->
<input type="number" name="berat" min="0" max="5" step="0.25" value="0.5" />

Kesalahan lain: mengandalkan type="number" untuk menolak huruf sepenuhnya. Pengguna masih bisa paste teks aneh, dan notasi seperti "e" (1e3) dianggap angka valid oleh browser. Validasi server tetap wajib. Juga jangan pakai number untuk kode pos atau NIK: itu identifier berbentuk digit, bukan angka untuk dihitung, dan spinner serta hilangnya nol di depan akan merusaknya.

Catatan teknis: Nilai yang dikirim type="number" selalu string di sisi server ("5", bukan 5), sama seperti semua input HTML. Konversi ke angka adalah tugas backend. Dan ingat min/max hanya memengaruhi validasi saat submit: pengguna tetap bisa mengetik 999 di field max 10, browser baru protes saat tombol submit ditekan.

Rangkuman

Pakai number saat nilai tepatnya penting (jumlah, berat, harga) dengan min, max, dan step yang sesuai. Pakai range saat yang penting perkiraannya (rating, level). Jangan pakai keduanya untuk digit yang bukan untuk dihitung seperti nomor HP atau kode pos.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Survei Rasa

Buat form survei: input number untuk 'Berapa gelas per hari' (min 1, max 10) dan range untuk 'Tingkat kepahitan favorit' (min 1, max 10, step 1, nilai awal 5), masing-masing dengan label. Memilih kontrol angka yang tepat membuat data yang masuk bersih sejak awal.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Survei</title>
</head>
<body>
  <h1>Survei Kopi</h1>
  <form action="/survei" method="post">
    <!-- number + range di sini -->
  </form>
</body>
</html>

Open Sandbox