Minlength dan Maxlength

Nama pengguna umumnya dilarang terlalu pendek, sementara kolom perkenalan diberi batas agar tidak memenuhi halaman. HTML menyediakan dua atribut untuk mengatur panjang teks: maxlength menahan jumlah karakter maksimum, sedangkan minlength menetapkan jumlah minimum. Keduanya terdengar mirip, tetapi perilakunya berbeda saat dieksekusi browser: satu memotong isian, yang lain menolak pengiriman. Chapter ini membedah keduanya beserta waktu yang tepat untuk memakai masing-masing.

Membatasi Karakter dengan maxlength #

maxlength mendefinisikan panjang maksimum string yang boleh dimasukkan pengunjung ke dalam input teks atau textarea. Nilainya berupa bilangan bulat 0 atau lebih. Begitu jumlah karakter mencapai batas, ketikan berikutnya tidak lagi diterima: nilai pada kontrol berhenti di batas tersebut, dan tempelan (paste) yang melebihi batas ikut terpotong.

Karena pemotongan terjadi di dalam kontrol, nilai yang terkirim tidak akan pernah melebihi batas. Browser pun tidak menampilkan pesan kesalahan untuk maxlength: pelanggarannya tidak mungkin terbentuk, karena batas ini murni menahan masukan, bukan menilai keabsahan nilai.

Banyak situs menampilkan penghitung karakter di samping kolom. Penghitung semacam itu dibuat dengan JavaScript, dan pembahasannya menunggu section HTML dan JavaScript.

Menetapkan Panjang Minimum dengan minlength #

minlength menetapkan panjang minimum yang diterima, dengan aturan pemeriksaan yang berbeda: aturan ini hanya berlaku ketika kolom terisi. Nilai kosong tetap lolos pemeriksaan minlength, karena menolak kolom kosong adalah tugas required. Bila pengunjung mengisi kolom dengan teks yang lebih pendek dari batas, pengiriman dibatalkan dan browser menampilkan balon pesan yang menyatakan nilai terlalu pendek.

Sebagai gambaran, minlength="8" pada kolom kata sandi menolak isian budi123 — tujuh karakter — saat form dikirim. Kolom yang sama tetap lolos pemeriksaan bila dibiarkan kosong, kecuali kolom itu juga membawa required.

Memotong versus Menolak Submit #

Perbedaan keduanya mudah dipindai dalam satu tabel:

Perbedaan ini menjelaskan mengapa keduanya sering dipasang berpasangan: maxlength menjaga isian agar tidak berlebihan sejak awal, sementara minlength menahan pengiriman yang terlalu pendek. Kombinasi minlength="4" maxlength="20" menghasilkan rentang yang wajar untuk nama pengguna.

Contoh: Form Registrasi Anggota #

Komunitas belajar milik Budi membuka pendaftaran anggota dengan aturan panjang isian yang berbeda untuk tiap kolom. Simpan file berikut sebagai contoh-minlength-maxlength.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registrasi Anggota Komunitas</title>
</head>
<body>
  <h1>Registrasi Anggota</h1>
  <form action="/registrasi" method="post">
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username" minlength="4" maxlength="20">
    </p>
    <p>
      <label for="sandi">Kata sandi</label>
      <input type="password" id="sandi" name="sandi" minlength="8" required>
    </p>
    <p>
      <label for="bio">Perkenalan singkat</label>
      <textarea id="bio" name="bio" rows="4" maxlength="200"></textarea>
    </p>
    <p>
      <input type="submit" value="Buat akun">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kolom nama pengguna yang berhenti menerima karakter pada 20 huruf
  - Kolom kata sandi wajib isi; isian "budi123" ditolak saat submit karena
    lebih pendek dari 8 karakter
  - Kolom perkenalan yang membatasi teks pada 200 karakter

Berikut peran setiap bagian kode:

1. Baris 12-13 (label dan input username): nama pengguna menerima 4-20 karakter; maxlength menahan ketikan, sedangkan minlength menilai saat submit.
2. Baris 16-17 (input password): kata sandi wajib isi dengan minimal 8 karakter; required menutup celah nilai kosong yang ditinggalkan minlength.
3. Baris 20-21 (textarea bio): kolom perkenalan dibatasi 200 karakter; maxlength berlaku pada textarea juga.
4. Baris 24 (input submit): tombol yang memicu pemeriksaan minlength sebelum data terkirim.

Sampai di sini aturan kita mengatur jumlah karakter. Chapter berikutnya pindah ke nilai angka dan tanggal: atribut min, max, dan step menetapkan rentang yang sah untuk input number, date, hingga range.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Atribut minlength
• MDN Web Docs — Atribut maxlength
• MDN Web Docs — Input text
• WHATWG — HTML Living Standard: Constraint validation

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registrasi Anggota Komunitas</title>
</head>
<body>
  <h1>Registrasi Anggota</h1>
  <form action="/registrasi" method="post">
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username" minlength="4" maxlength="20">
    </p>
    <p>
      <label for="sandi">Kata sandi</label>
      <input type="password" id="sandi" name="sandi" minlength="8" required>
    </p>
    <p>
      <label for="bio">Perkenalan singkat</label>
      <textarea id="bio" name="bio" rows="4" maxlength="200"></textarea>
    </p>
    <p>
      <input type="submit" value="Buat akun">
    </p>
  </form>
</body>
</html>