Textarea

Seluruh kontrol input yang kita kenali selama ini menerima satu baris teks, padahal banyak data tidak rela dipangkas semata karena lajur isian yang sempit. Pesan pengunjung, ulasan produk, dan deskripsi laporan membutuhkan ruang menulis yang dapat memuat beberapa baris sekaligus. HTML menjawab kebutuhan itu dengan elemen textarea, satu-satunya kontrol form yang dirancang khusus untuk teks panjang, dan chapter ini membedah perilaku beserta atribut-atributnya.

Sifat Dasar textarea #

textarea menghasilkan area ketikan multi-baris: pengunjung dapat menekan Enter untuk pindah baris, dan teks mengalir mengikuti lebar area. Elemen ini berdiri sendiri dengan tag pembuka dan penutup, berbeda dari input yang berupa void element. Sama seperti kontrol lain, textarea membawa name sebagai kunci data dan sebaiknya disertai label dengan asosiasi eksplisit.

Sebagai elemen dengan konten teks, textarea menyimpan nilai awalnya di antara tag pembuka dan penutup, bukan pada atribut value seperti input.

Nilai Awal Berada di Antar-Tag #

Cara memberi teks awal pada textarea adalah menuliskannya langsung di dalam elemen:

<p>
  <label for="pesan">Pesan</label>
  <textarea id="pesan" name="pesan">Tuliskan pesan di sini.</textarea>
</p>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Area ketikan multi-baris berisi teks "Tuliskan pesan di sini."
  - Teks tersebut dapat diedit atau dihapus pengunjung

Semua yang berada di antara kedua tag menjadi nilai awal, dan aturan itu berlaku menyeluruh termasuk spasi serta pindah baris. Konsekuensinya, <textarea></textarea> yang ditulis rapat menghasilkan area kosong, sedangkan kedua tag yang dipisah baris kosong di kode sumber menghasilkan area yang terisi baris kosong. Kebiasaan yang sehat: biarkan textarea tanpa konten bila tidak membutuhkan teks awal.

rows dan cols: Mengatur Ukuran Awal #

Dua atribut menentukan ukuran tampilan awal textarea. Atribut rows menyatakan banyaknya baris teks yang tampak, sedangkan cols menyatakan lebar dalam satuan rata-rata lebar karakter. Bila keduanya tidak ditulis, browser memakai nilai bawaan 2 baris dan 20 kolom, yang terasa sempit untuk pesan panjang.

Perlu dicatat, rows dan cols hanya mengatur ukuran visual, bukan batas data: teks yang melebihi ukuran membuat area bergulir. Batas jumlah karakter diserahkan pada atribut maxlength.

maxlength dan wrap Secara Ringkas #

Dua atribut pelengkap menutup pembahasan perilaku textarea. Atribut maxlength membatasi jumlah karakter yang diterima, sehingga maxlength="500" menghentikan masukan tepat pada karakter ke-500; atribut ini milik keluarga validasi yang dibahas pada section Form Validation. Atribut wrap mengatur perlakuan pindah baris pada saat pengiriman: soft — nilai bawaannya — mengirim teks apa adanya tanpa pindah baris tambahan, hard menyisipkan pindah baris pada batas lebar sehingga wajib disertai cols, dan off menghentikan pelipatan teks pada tampilan.

Mengubah Ukuran lewat CSS #

Browser modern menampilkan pegangan ubah ukuran di sudut bawah textarea, sehingga pengunjung dapat memperlebar area sesuai kebutuhan. Perilaku ini diatur properti CSS resize: nilai both membiarkan kedua arah, vertical mengizinkan arah tegak saja, dan none menghapus pegangan tersebut:

textarea {
  resize: vertical;
}

CSS berada di luar lingkup course saat ini, sehingga potongan di atas cukup menjadi pengetahuan awal; pembahasannya menyusul pada section HTML dan CSS.

Contoh: Form Pesan Masukan #

File berikut merangkai materi chapter ini pada form masukan untuk Toko Budi. Simpan sebagai form-masukan.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>Form Pesan Masukan</title>
</head>
<body>
  <h1>Pesan Masukan untuk Toko Budi</h1>
  <form>
    <p>
      <label for="nama">Nama</label>
      <input type="text" id="nama" name="nama">
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <label for="pesan">Pesan</label>
      <textarea id="pesan" name="pesan" rows="6" cols="40" maxlength="500"></textarea>
    </p>
    <p>
      <input type="submit" value="Kirim Pesan">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kolom "Nama" dan "Email" satu baris di bagian atas
  - Area "Pesan" setinggi enam baris dan selebar 40 karakter
  - Pegangan ubah ukuran di sudut bawah kanan area pesan
  - Tombol "Kirim Pesan" di bagian bawah

Berikut peran setiap bagian kode:

1. Baris 13 dan 17: dua input satu baris — text untuk nama dan email untuk alamat email.
2. Baris 21 (textarea): area pesan dengan rows="6" dan cols="40" sebagai ukuran awal yang lapang.
3. Atribut maxlength="500": batas 500 karakter pada pesan.
4. Tag rapat ></textarea>: textarea ditulis tanpa konten, sehingga area terbuka dalam keadaan kosong.
5. Baris 24 (input type="submit"): tombol yang memicu pengiriman.

Dengan textarea, keluarga kontrol teks form kita lengkap: satu baris, satu baris berformat, dan multi-baris. Chapter berikutnya membahas tombol — elemen yang sejauh ini kita pakai dalam wujud input type="submit" untuk memicu seluruh pengiriman di atas.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen textarea
• MDN Web Docs — Properti CSS resize
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Pesan Masukan</title>
</head>
<body>
  <h1>Pesan Masukan untuk Toko Budi</h1>
  <form>
    <p>
      <label for="nama">Nama</label>
      <input type="text" id="nama" name="nama">
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <label for="pesan">Pesan</label>
      <textarea id="pesan" name="pesan" rows="6" cols="40" maxlength="500"></textarea>
    </p>
    <p>
      <input type="submit" value="Kirim Pesan">
    </p>
  </form>
</body>
</html>