Textarea: Input Multibaris

Kenapa Tidak Pakai input Saja?

input type="text" hanya menampung satu baris. Begitu pengguna menekan Enter, form langsung terkirim. Itu cocok untuk nama atau email, tetapi tidak untuk komentar, alamat lengkap, atau deskripsi produk yang butuh beberapa paragraf. Di sinilah textarea berperan: kolom teks multibaris tempat Enter berarti baris baru, bukan kirim.

Ada perbedaan penting lain: isi awal textarea ditulis di antara tag pembuka dan penutup, bukan di atribut value. Ini karena isinya bisa sangat panjang, dan atribut tidak dirancang untuk menampung teks sebesar itu.

Contoh Sederhana

<label>Komentar:
  <textarea name="komentar" rows="4" cols="40"
    placeholder="Tulis komentarmu di sini..."></textarea>
</label>

rows dan cols mengatur ukuran awal (jumlah baris dan kolom karakter). Anggap saja sebagai saran ukuran, karena tampilan akhirnya lebih baik diatur lewat CSS. Atribut placeholder menampilkan teks panduan yang hilang saat pengguna mulai mengetik.

Ada satu jebakan klasik: spasi atau baris baru di dalam tag ikut menjadi isi awal. Jadi jangan menulis seperti ini:

<!-- Salah: baris baru dan spasi ikut jadi isi -->
<textarea name="komentar">
</textarea>

<!-- Benar: tag penutup langsung menempel -->
<textarea name="komentar"></textarea>

Bedanya sepele tetapi efeknya nyata: pada versi yang salah, kursor tidak mulai di awal dan placeholder tidak muncul karena textarea sudah "terisi" spasi.

Contoh Realistis: Membatasi Panjang

Formulir nyata jarang membiarkan teks tanpa batas. Bio profil misalnya, biasanya dibatasi 200 karakter:

<label>Bio singkat (maksimal 200 karakter):
  <textarea name="bio" rows="3" cols="40" maxlength="200"
    placeholder="Ceritakan sedikit tentang dirimu..."></textarea>
</label>

maxlength mencegah pengguna mengetik lebih dari batas yang ditentukan. Namun pengguna tidak bisa melihat sisa kuotanya, jadi untuk form yang penting biasanya ditambahkan penghitung karakter dengan JavaScript (akan dibahas di seri JS).

Ada juga atribut wrap yang mengatur apakah baris baru visual ikut terkirim ke server. wrap="soft" (bawaan) berarti tidak ikut terkirim, sedangkan wrap="hard" berarti ikut terkirim, tetapi membutuhkan atribut cols agar browser tahu di mana baris harus dipotong.

Kesalahan Umum

Selain jebakan spasi di atas, kesalahan umum adalah memakai textarea untuk input yang sebenarnya satu baris, seperti kode pos atau username. Selain membingungkan pengguna, textarea tidak mendukung atribut validasi seperti pattern yang dimiliki input. Aturan praktisnya sederhana: kalau jawabannya tidak butuh tombol Enter, pakai input.

Kesalahan lain: lupa memasangkan textarea dengan label. Karena textarea sering diletakkan sendirian dengan placeholder yang manis, labelnya ketinggalan. Padahal pengguna screen reader tetap butuh nama resmi untuk field tersebut, sama seperti input lainnya.

Catatan teknis: Jangan pernah menulis tag penutup </textarea> di dalam isi textarea, misalnya saat memberi contoh kode. Browser akan mengira itu penutup yang sebenarnya, textarea berakhir lebih awal, dan sisa form ikut rusak. Kalau harus menampilkan contoh, escape dengan entity seperti pada contoh di paragraf ini.