Min dan Max

“Jumlah tiket dua belas” — penolakan menyambut di layar kasir, padahal form hanya menjual maksimal sepuluh. “Kelas 30 Oktober” — tanggal itu sudah lewat dua pekan. Dua kesalahan yang tampak berbeda ini berbagi satu akar: nilai berada di luar rentang sah. HTML menjawabnya dengan sepasang atribut min dan max.

Rentang Nilai yang Sah #

Aturannya: min menetapkan nilai terkecil dan max nilai terbesar yang diterima browser. Mekanismenya: saat submit, browser membandingkan nilai kontrol dengan kedua batas. Nilai di luar rentang menandai kontrol tidak sah — pengiriman ditahan, pesan bawaan muncul, fokus berpindah ke kolom galat pertama. Untuk type="range", min dan max sekaligus menjadi kedua ujung slider.

Berbeda dengan minlength/maxlength yang menghitung karakter, min/max membandingkan nilai. Format nilai mengikuti tipe kontrol: angka biasa untuk number dan range, format ISO untuk keluarga tanggal dan waktu. Pesan bawaannya menyebut angka batas secara langsung — misalnya nilai harus lebih besar atau sama dengan 1 — sehingga pengguna tahu batas mana yang dilanggar.

Tipe yang Mendukung #

Keluarga month dan week jarang memakai rentang, tetapi aturan yang berlaku sama: nilai di luar batas ditolak saat submit, dan nilai kolom tetap ditulis dalam format ISO.

Contoh: Reservasi Workshop #

Anggap hari ini 1 November 2026 — reservasi kursi dibuka mulai besok.

<form action="/reservasi" method="post">
  <label for="tiket">Jumlah tiket (1–10)</label>
  <input type="number" id="tiket" name="tiket" min="1" max="10" value="2" required>
  <label for="tanggal">Tanggal kunjungan (mulai besok)</label>
  <input type="date" id="tanggal" name="tanggal" min="2026-11-02" max="2026-12-31" required>
  <button type="submit">Pesan kursi</button>
</form>

Data yang terkirim setelah Siti memesan tiga tiket untuk 5 November:

tiket=3&tanggal=2026-11-05

Ketik 12 pada kolom tiket lalu tekan Pesan kursi — bubble bawaan menahan pengiriman karena nilai melebihi max. Ganti ke angka dalam rentang 1–10, lalu pilih tanggal 1 November 2026 (sebelum min) dan kirim lagi: kini giliran rentang tanggal yang menolak.

Pada demo, action diarahkan ke https://example.com/reservasi — domain cadangan resmi — dan skrip kecil menahan perpindahan supaya pasangan name=value yang terkirim terlihat di halaman, persis kiriman yang diterima server; markup formnya sama persis dengan contoh di atas.

Mari kita telaah kode di atas:

1. Baris 3 (min="1" max="10"): nilai 12 ditolak saat submit dengan pesan bawaan rentang; tombol naik-turun bawaan kotak angka juga menjaga nilainya di antara 1 dan 10.
2. Baris 5 (min="2026-11-02"): tanggal ditulis dalam format ISO — bentuk lokal seperti 02/11/2026 tidak sah sebagai nilai atribut; tampilan kalender boleh mengikuti setelan pengguna, nilainya tidak.
3. Baris 5 (max="2026-12-31"): pemilih kalender umumnya memudarkan tanggal di luar rentang; pemeriksaan sebenarnya tetap dijalankan saat submit.
4. Baris 3 (value="2"): nilai awal sudah berada di dalam rentang — kombinasi yang rapi; nilai awal di luar rentang langsung menandai kolom tidak sah sejak halaman dibuka.
5. Hasil tiket=3&tanggal=2026-11-05: kedua nilai berada di dalam rentang sehingga lolos tanpa hambatan.

Ringkasan #

• min dan max membatasi rentang nilai untuk angka, tanggal, dan waktu.
• Nilai atribut keluarga tanggal/waktu ditulis dalam format ISO seperti 2026-11-02.
• Nilai di luar rentang ditahan saat submit lengkap dengan pesan bawaan browser.
• Tanpa required, kolom kosong lolos pemeriksaan rentang.

Chapter berikutnya menyempurnakan rentang dengan granular terkecilnya: atribut step mengatur jarak antar nilai yang sah.