Textarea HTML: rows, resize, maxlength dan Teks Default

Cara membuat textarea

<textarea> adalah kolom teks untuk lebih dari satu baris: pesan, komentar, deskripsi. rows mengatur tinggi yang terlihat dalam jumlah baris. Ketik beberapa baris lalu tekan Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Ada dua hal yang berbeda dari <input>: textarea butuh tag penutup, dan teks awalnya ditulis di antara tag, bukan di atribut value. name-nya dikirim dengan teksnya sebagai nilai, termasuk pindah barisnya.

Atribut textarea

Teks default ditulis di antara tag

Semua yang ada di antara <textarea> dan </textarea> adalah teks awalnya, persis seperti yang ditulis: termasuk spasi, tab dan pindah baris. Hanya satu pindah baris tepat sesudah tag pembuka yang diabaikan. Karena itu indentasi bisa menjadi jebakan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

Textarea kedua diawali empat spasi dan diakhiri pindah baris serta dua spasi lagi, yang semuanya harus dihapus pembaca. Tulis teks default-nya menempel langsung ke tag.

HTML di dalam textarea tidak dirender; <b>hi</b> di antara tag-nya tampil sebagai teks apa adanya.

Lebar, mengubah ukuran dan membesar otomatis

Browser membuat pembaca bisa menarik sudut textarea untuk mengubah ukurannya. resize di CSS membatasinya, dan width: 100% dengan box-sizing: border-box membuatnya memenuhi container-nya dengan pas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

Textarea terakhir mengatur ulang tingginya lalu mengaturnya menjadi scrollHeight (tinggi konten dan padding-nya) ditambah border-nya, setiap kali ada tombol yang ditekan. Ketik beberapa baris di sana: textarea itu tidak pernah menampilkan scrollbar. resize: vertical adalah default yang paling ramah: jawaban panjang mendapat ruang, dan tidak ada yang bisa menarik kolomnya lebih lebar dari layout.

Browser berbasis Chromium bisa membuat textarea membesar otomatis hanya dengan CSS lewat field-sizing: content. Browser yang belum mendukungnya mengabaikan baris itu dan tetap memakai ukuran normal, jadi aman ditambahkan, tapi pertahankan script-nya kalau setiap pembaca harus mendapat kotak yang membesar.

maxlength dan penghitung karakter

maxlength menghentikan input pada jumlah karakter tertentu. Kalau dipakai sendirian, atribut ini tidak memberi peringatan apa pun, jadi pembaca baru sadar saat ketikannya tidak lagi berfungsi. Penghitung memperbaikinya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby membuat screen reader membacakan penghitung bersama kolomnya, dan aria-live="polite" mengumumkan perubahannya di sela-sela ketikan. maxlength hanya ditegakkan oleh browser, jadi server juga harus memeriksa panjangnya.

Pindah baris di teks yang dikirim

Pindah baris yang diketik pembaca ikut dikirim bersama teksnya. Di data yang dikirim, setiap pindah baris menjadi pasangan carriage return dan line feed (%0D%0A di form dengan URL encoding), yang diharapkan oleh kebanyakan server. Untuk menampilkan teks itu di halaman nanti beserta pindah barisnya, ubah menjadi <br> saat ditampilkan atau atur gaya elemennya dengan white-space: pre-line.

wrap="hard" (yang butuh cols) melangkah lebih jauh: atribut ini juga menyisipkan pindah baris di tempat teksnya terbungkus secara visual, sehingga server menerima baris yang tidak lebih panjang dari cols karakter. Nilai default-nya, wrap="soft", hanya mengirim pindah baris yang diketik pembaca.

Styling textarea

Chrome dan Firefox memberi textarea font monospace sekitar 13px, dan itulah kenapa textarea sering terlihat tidak cocok dengan halamannya. font: inherit memperbaikinya. Pertahankan gaya fokus yang terlihat kalau kamu mengubah border-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

Teks placeholder sebaiknya punya kontras yang cukup untuk dibaca; abu-abu muda yang dipakai banyak desain sulit dibaca. Dan seperti di setiap kolom, placeholder bukan label: placeholder hilang begitu pembaca mengetik. Label dibahas di label HTML.

Kesalahan umum

• <textarea value="...">. Tidak ada atribut value; letakkan teksnya di antara tag.
• Memberi indentasi pada teks default mengikuti HTML-nya. Spasinya menjadi bagian dari nilai.
• <textarea /> yang menutup sendiri. Textarea bukan void element; tanpa </textarea>, sisa halaman tertelan ke dalamnya sebagai teks.
• Tanpa font: inherit, sehingga kolomnya memakai font monospace yang kecil.
• resize: none dengan tinggi tetap yang kecil. Jawaban panjang berakhir di kotak kecil yang harus digulir.
• Hanya mengandalkan maxlength. Validasi panjangnya di server juga.