Jumlah tiket tidak boleh negatif, tanggal kunjungan tidak boleh di luar periode pameran, dan slider volume punya batas atas yang jelas. Untuk nilai semacam ini, HTML menyediakan tiga atribut: min, max, dan step. Ketiganya bekerja pada input yang bernilai angka atau tanggal — number, range, date, month, week, time, dan datetime-local — dan hasil pemeriksaannya menyatu dengan mekanisme yang kita bahas pada Chapter Validasi Browser.

Tiga Atribut Batas Nilai #

Ketiga atribut saling melengkapi dalam mengatur nilai yang sah:

  • min: nilai terkecil yang diterima; nilai yang lebih kecil dinilai tidak valid saat submit.
  • max: nilai terbesar yang diterima; nilai yang lebih besar dinilai tidak valid.
  • step: kelipatan yang diizinkan, dihitung dari min — atau dari nilai awal jenis kontrol bila min tidak dituliskan.

Bila nilai tidak jatuh pada kelipatan step, browser menandai kontrol dengan status bernama stepMismatch — salah satu dari sejumlah flag status yang disimpan browser untuk tiap kontrol. Kita cukup mengenal namanya di sini; daftar status lengkapnya menyusul pada Chapter Validasi Browser.

Hubungan dengan Spinner dan Slider #

Atribut-atribut ini tidak hanya berlaku saat submit; browser memakainya untuk mengatur perilaku kontrol. Pada input type="number", panah naik-turun (spinner) melangkah sebesar step dan berhenti di min atau max. Pada input type="range", min menjadi ujung kiri slider, max menjadi ujung kanan, dan step menentukan jarak antar posisi yang dapat dipilih.

Pada input tanggal, kalender yang dibuka browser menonaktifkan tanggal di luar rentang min hingga max, sehingga pengunjung tidak bisa memilihnya sejak awal. Batas pun terasa sebelum pemeriksaan submit berjalan. Tabel berikut merangkum makna step pada tiga jenis input:

Jenis inputContoh batasMakna step
numbermin="1" max="5"langkah panah naik-turun
datemin="2025-08-01" max="2025-08-31"satuan hari
rangemin="0" max="100"jarak antar posisi slider

Contoh: Form Pemesanan Tiket Pameran #

Galeri Siti menyelenggarakan pameran foto dengan pemesanan tiket daring. Satu pesanan memuat 1-5 tiket, dan kunjungan hanya menerima rentang tanggal tertentu. Simpan file berikut sebagai contoh-min-max-step.html, lalu buka di browser:

html contoh-min-max-step.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pemesanan Tiket Pameran</title>
</head>
<body>
  <h1>Pemesanan Tiket Pameran Foto</h1>
  <form action="/tiket" method="post">
    <p>
      <label for="jumlah">Jumlah tiket (1-5)</label>
      <input type="number" id="jumlah" name="jumlah" min="1" max="5" step="1" required>
    </p>
    <p>
      <label for="tanggal">Tanggal kunjungan</label>
      <input type="date" id="tanggal" name="tanggal" min="2025-08-01" max="2025-08-31" required>
    </p>
    <p>
      <label for="datang">Estimasi jam datang</label>
      <input type="time" id="datang" name="datang" min="09:00" max="17:00" step="900">
    </p>
    <p>
      <input type="submit" value="Pesan">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Kolom jumlah tiket dengan panah naik-turun yang berhenti di 1 dan 5
  - Kolom tanggal; kalender menonaktifkan tanggal di luar Agustus 2025
  - Kolom jam dengan langkah 15 menit, dibatasi pukul 09:00-17:00
  - Nilai 7 pada jumlah tiket ditolak saat submit karena melebihi max

Berikut peran setiap bagian kode:

  1. Baris 12-13 (label dan input number): jumlah tiket wajib isi, dibatasi 1-5; panah spinner melangkah satu per satu.
  2. Baris 16-17 (input date): tanggal kunjungan wajib; hanya 1-31 Agustus 2025 yang dapat dipilih di kalender.
  3. Baris 20-21 (input time): jam datang dibatasi pukul 09:00-17:00 dengan kelipatan 900 detik, atau 15 menit.
  4. Baris 24 (input submit): tombol yang memicu pemeriksaan min, max, dan step sebelum data terkirim.

Angka, tanggal, dan jam kini punya pagar rentang. Chapter berikutnya melengkapi aturan untuk teks berformat — kode pos, nomor telepon, dan nama pengguna — dengan atribut pattern beserta sedikit sintaks regex.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-min-max-step.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pemesanan Tiket Pameran</title>
</head>
<body>
  <h1>Pemesanan Tiket Pameran Foto</h1>
  <form action="/tiket" method="post">
    <p>
      <label for="jumlah">Jumlah tiket (1-5)</label>
      <input type="number" id="jumlah" name="jumlah" min="1" max="5" step="1" required>
    </p>
    <p>
      <label for="tanggal">Tanggal kunjungan</label>
      <input type="date" id="tanggal" name="tanggal" min="2025-08-01" max="2025-08-31" required>
    </p>
    <p>
      <label for="datang">Estimasi jam datang</label>
      <input type="time" id="datang" name="datang" min="09:00" max="17:00" step="900">
    </p>
    <p>
      <input type="submit" value="Pesan">
    </p>
  </form>
</body>
</html>