Atribut step

Harga tiket Rp25.000,50 memuat dua angka desimal; jam kelas hanya boleh bergeser tiap 15 menit. Keduanya menuntut lebih dari sekadar rentang — nilai-nilai sahnya harus jatuh pada titik-titik yang berjarak sama. Atribut step mengatur jarak antar titik itu.

Jarak Antar Nilai Sah #

Aturannya: step menyatakan selisih antar dua nilai sah yang berdekatan. Mekanismenya: browser menghitung deret nilai sah mulai dari titik jangkar — min bila ada, atau angka nol bila min tidak ditulis. Nilai sah adalah jangkar ditambah kelipatan step; nilai yang jatuh di antara dua titik deret ditandai tidak sah dan submit ditahan.

Contoh paling jelas pada type="number" dengan min="0" dan step="0.01": deretnya 0, 0,01, 0,02, dan seterusnya. Dalam notasi kode, nilai 25000.50 tepat jatuh pada titik deret — sah; nilai 25000.505 meleset tiga angka desimal — tidak sah. Nilai khusus step="any" mematikan pemeriksaan jarak sepenuhnya — dipakai bila setiap nilai dalam rentang sama-sama sah.

Satuan dan Nilai Bawaan #

Satu kekeliruan yang sering terjadi: step="30" pada time berarti 30 detik, bukan 30 menit. Untuk lompatan 15 menit, tulis step="900" — sembilan ratus detik. Nilai step juga mengatur tombol naik-turun kotak angka: step="10" membuat tombol melompat sepuluh, bukan satu.

Contoh: Harga Tiket dan Jam Sesi #

<form action="/pesan" method="post">
  <label for="harga">Harga tiket (rupiah, dua desimal)</label>
  <input type="number" id="harga" name="harga" min="0" step="0.01" required>
  <label for="jam">Jam sesi (tiap 15 menit)</label>
  <input type="time" id="jam" name="jam" min="09:00" max="15:00" step="900" required>
  <button type="submit">Simpan harga</button>
</form>

Data yang terkirim setelah Dewi menetapkan harga dan jam:

harga=15000.50&jam=09%3A15

Ketik 15000.505 pada kolom harga lalu tekan Simpan harga — nilai itu meleset dari deret kelipatan 0,01, jadi bubble galat step menahan pengiriman; perbaiki menjadi tepat dua desimal, misalnya 15000.50, lalu kirim lagi: pasangan data tampil di bawah sebagai bukti pengiriman sah. Tekan juga tombol naik-turun kotak harga: nilainya bergeser 0,01 per ketukan, mengikuti step. Pada kolom jam, ketik 09:05 — bukan kelipatan 15 menit dari jangkar 09:00 — untuk melihat penolakan yang sama.

Pada demo, action diarahkan ke https://example.com/pesan — 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="0" step="0.01"): titik jangkar nol; nilai sah setiap kelipatan satu sen — 15000.50 sah, 15000.505 ditahan saat submit dengan pesan bawaan.
2. Baris 5 (step="900" pada time): satuan detik — 900 detik setara 15 menit; jam sah dimulai dari 09:00, lalu 09:15, 09:30, dan seterusnya.
3. Baris 5 (min="09:00" sebagai jangkar): tanpa min, deret dihitung dari tengah malam 00:00 — pukul 09:05 akan dianggap sah padahal bukan itu maksud kita.
4. Hasil jam=09%3A15: titik dua dienkode menjadi %3A — tanda bahwa 09:15 tepat berjarak 15 menit dari jangkar, sehingga lolos.

Ringkasan #

• step menentukan jarak antar nilai sah; nilai di luar deret ditahan saat submit.
• Deret dihitung dari min bila ada, atau dari nol.
• Satuan time dan datetime-local adalah detik — 900 berarti 15 menit.
• Harga desimal memakai step="0.01"; harga kelipatan seribu cukup step="1000".

Chapter berikutnya melompat dari angka ke pola teks: pattern memakai regular expression untuk menuntut format khusus.