Saat membuat formulir di website, terkadang kita perlu membatasi jumlah karakter yang bisa dimasukkan oleh pengguna pada suatu kolom input. Ini berguna untuk menjaga konsistensi data, menghemat ruang database, atau memastikan format yang tepat.

Ada dua cara utama untuk melakukan ini, yaitu menggunakan atribut HTML dan menggunakan JavaScript. Masing-masing memiliki kelebihan dan kekurangan, jadi penting untuk memahami keduanya.

1. Membatasi Karakter dengan Atribut maxlength (Cara Paling Sederhana)

Cara paling mudah dan direkomendasikan untuk membatasi jumlah karakter pada input teks adalah dengan menggunakan atribut maxlength di dalam elemen <input>. Atribut ini adalah bagian dari HTML5, yang berarti didukung oleh semua browser modern.

Contoh Kode HTML:

<label for="username">Username (maksimal 10 karakter):</label><br>
<input type="text" id="username" name="username" maxlength="10">

Bagaimana cara kerjanya? Saat pengguna mengetik di kolom input, browser secara otomatis akan mencegah mereka mengetik karakter ke-11 dan seterusnya. Atribut ini sangat efektif karena bekerja langsung di sisi browser (client-side) tanpa memerlukan kode JavaScript tambahan.

Kelebihan:

• Sangat mudah digunakan. Cukup tambahkan satu atribut.
• Tidak memerlukan JavaScript. Bekerja secara otomatis.
• Ramah pengguna. Pengguna langsung tahu batasnya karena browser tidak akan menerima karakter lebih.

Kekurangan:

• Hanya berfungsi pada input teks (type="text", type="password", type="email", dll.) dan textarea.
• Tidak berfungsi untuk input dengan type="number".

2. Membatasi Karakter dengan JavaScript (Untuk Kontrol Lebih Lanjut)

Meskipun maxlength sangat praktis, ada situasi di mana kamu mungkin butuh kontrol lebih. Misalnya, jika kamu ingin menampilkan hitungan mundur karakter, atau jika kamu bekerja dengan input type="number" yang tidak mendukung maxlength.

Contoh Kode HTML:

<label for="pesan">Pesan (maksimal 140 karakter):</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="50"></textarea>
<p>Karakter tersisa: <span id="sisa-karakter">140</span></p>

Contoh Kode JavaScript:

const textarea = document.getElementById('pesan');
const sisaKarakterSpan = document.getElementById('sisa-karakter');
const maxLength = 140;

textarea.addEventListener('input', () => {
  const jumlahKarakter = textarea.value.length;
  const sisa = maxLength - jumlahKarakter;
  sisaKarakterSpan.textContent = sisa;

  if (sisa < 0) {
    sisaKarakterSpan.style.color = 'red';
  } else {
    sisaKarakterSpan.style.color = 'black';
  }
});

Bagaimana cara kerjanya? Kode JavaScript di atas mendengarkan setiap ketikan pengguna ('input'). Setiap kali ada perubahan, ia menghitung panjang karakter, menghitung sisanya, dan memperbarui teks di <span> yang menampilkan sisa karakter. Dengan ini, kamu bisa memberikan umpan balik visual yang lebih baik kepada pengguna.

Kelebihan:

• Sangat fleksibel. Kamu bisa menambahkan logika atau tampilan tambahan sesuai kebutuhan.
• Bisa digunakan untuk input type="number" (walaupun maxlength untuk number juga bisa diatasi dengan atribut max).
• Memberikan pengalaman pengguna yang lebih baik dengan hitungan karakter secara real-time.

Kekurangan:

• Membutuhkan lebih banyak kode.
• Jika pengguna menonaktifkan JavaScript, fitur ini tidak akan berfungsi.

Kesimpulan dan Saran

• Untuk kebutuhan sederhana, selalu gunakan maxlength. Atribut ini adalah cara tercepat dan paling efisien.
• Gunakan JavaScript ketika kamu perlu menambahkan fitur interaktif lainnya, seperti menghitung sisa karakter atau memberikan feedback visual yang lebih kompleks kepada pengguna.

Penting untuk diingat bahwa baik maxlength maupun JavaScript hanya berfungsi di sisi client-side. Ini berarti pengguna yang jahil bisa saja memanipulasi kode di browser mereka. Oleh karena itu, kamu harus selalu melakukan validasi ulang di sisi server (misalnya, dengan PHP, Node.js, atau bahasa backend lainnya) untuk memastikan data yang masuk ke database kamu tetap valid dan sesuai dengan batasan yang kamu inginkan.