Angka masuk form dalam dua rasa kebutuhan. Ada angka eksak: jumlah peserta kelas, jumlah item pesanan — salah satu angka berarti salah total. Ada pula angka perkiraan: tingkat kepekatan kopi, volume musik — yang penting arahnya, bukan presisinya. HTML menyediakan dua kontrol untuk dua rasa itu: number dan range.

Keduanya berstatus Baseline di seluruh browser modern dan sama-sama memakai tiga atribut pembatas: min, max, dan step.

type number #

Aturannya: type="number" menghasilkan kotak isian angka dengan tombol naik-turun kecil di sisi kanannya. Mekanismenya: browser menjaga isi kotak tetap berupa angka yang sah — huruf tertolak saat diketik pada sebagian besar browser, dan saat submit, nilai diperiksa terhadap batas min, max, serta jarak antar nilai pada step. Hasilnya, data yang tiba di server adalah angka yang sudah tersaring, bukan teks bebas.

type range #

Aturannya: type="range" menghasilkan slider untuk memilih satu nilai di dalam rentang. Mekanismenya: pengguna menggeser kenop; nilai yang terbentuk bergerak dari min ke max sebesar step. Tanpa atribut value, kenop mulai dari titik tengah rentang. Satu kekurangan yang wajar: slider tidak menampilkan angkanya sendiri — nilai hanya terlihat setelah dikirim. Umpan balik langsung butuh JavaScript, biasanya dengan menampilkan nilai ke elemen output setiap kali kenop bergeser.

Contoh: Form Pesanan Kelas #

html 
<form action="/pesan-kelas" method="post">
  <label for="peserta">Jumlah peserta</label>
  <input type="number" id="peserta" name="peserta" min="1" max="12" step="1" value="2">
  <label for="kepekatan">Tingkat kepekatan kopi</label>
  <input type="range" id="kepekatan" name="kepekatan" min="1" max="5" step="1">
  <button type="submit">Pesan kelas</button>
</form>

Data yang terkirim saat form dikirim tanpa diubah:

text 
peserta=2&kepekatan=3

Kedua kontrol bisa langsung dicoba. Tekan tombol naik-turun pada kotak jumlah peserta — nilainya bergeser mengikuti step. Lalu geser kenop kepekatan: angkanya tampil langsung di bawah slider, sesuai pola output yang dibahas di atas; tekan Pesan kelas untuk melihat pasangan data yang berangkat.

Demo menambahkan elemen output, skrip kecil untuk umpan balik nilai slider dan tampilan pasangan yang terkirim, serta action ke https://example.com/pesan-kelas — domain cadangan resmi — dengan perpindahan ditahan agar hasilnya terbaca di halaman; markup kontrolnya sama persis dengan contoh di atas.

Mari kita telaah kode dan hasilnya:

  1. Baris 3 (min="1" max="12" step="1"): jumlah peserta dibatasi 1 sampai 12 dan hanya bilangan bulat — nilai 1,5 ditolak saat submit.
  2. Baris 3 (value="2"): kotak dibuka dengan isi 2, siap dikirim bagaimana adanya.
  3. Baris 5 (min="1" max="5"): slider kepekatan bergerak pada lima jarak bernilai 1 sampai 5.
  4. Hasil kepekatan=3: tanpa value, kenop berdiri di tengah rentang — nilai tengah antara 1 dan 5 adalah 3.

Ringkasan #

  • number = kotak angka dengan tombol naik-turun; nilainya tersaring sejak diketik.
  • range = slider; tanpa value, kenop mulai dari titik tengah rentang.
  • min, max, dan step membatasi keduanya; batas diperiksa saat submit.
  • Slider tak menampilkan angkanya sendiri — umpan balik langsung memerlukan JavaScript dan elemen output.

Chapter berikutnya menyetel waktu: date, time, dan keluarga pemilih jadwal bawaan browser.