Materi
Atribut required dan type email yang kamu pakai di pelajaran formulir dasar adalah bagian dari validasi bawaan. Browser memeriksa setiap isian sebelum formulir dikirim. Selama ada isian yang melanggar aturannya, kiriman ditahan dan pesan muncul di dekat isian itu. Semuanya tanpa satu baris JavaScript pun.
<label for="balita">Jumlah balita (1 sampai 5)</label>
<input type="number" id="balita" name="balita" min="1" max="5" required>
<label for="kodepos">Kode pos (5 angka)</label>
<input type="text" id="kodepos" name="kodepos" inputmode="numeric" pattern="[0-9]{5}">
<label for="pesan">Pesan (maks. 200 karakter)</label>
<textarea id="pesan" name="pesan" maxlength="200"></textarea>Untuk bilangan, pakai type number dengan min dan max. Angka di luar rentang ditolak. Atribut step mengatur kelipatan yang sah, dihitung dari min. Tanpa step, kelipatannya 1, jadi 2,5 ditolak. Nominal iuran dengan min 10000 dan step 5000 hanya menerima 10.000, 15.000, 20.000, dan seterusnya.
Tidak semua deretan angka adalah bilangan. Kode pos dan nomor HP tidak pernah dijumlahkan. MDN menyebut type number tidak cocok untuk isian seperti itu dan menyarankan type text dengan inputmode numeric, supaya ponsel menampilkan papan angka, ditambah pattern. Pattern berisi pola yang harus cocok dengan seluruh isian, bukan sebagian, jadi pattern [0-9]{5} menolak 5012 dan juga 501234.
Untuk teks, maxlength membatasi jumlah karakter dan minlength memberi batas bawah. Tulis juga aturannya di label, misalnya Kode pos (5 angka). Pesan bawaan browser tidak tahu maksud polamu.
