HTML textarea: Teks Multibaris, Batas Panjang, readonly, dan Nilai Kiriman

Referensi HTML

Dibuat 2026-10-30 Terakhir Diubah 2026-10-30

HTML textarea menerima beberapa baris teks biasa. Letakkan konten awal di antara tag pembuka dan penutupnya, gunakan rows/cols untuk ukuran tampilan, dan minlength/maxlength untuk panjang input. Tetapkan name untuk mengirim nilai dengan formulir.

Ukuran tampilan, konten awal, dan batas input

textarea membutuhkan tag penutup. Berbeda dengan input, ia tidak menggunakan atribut nilai HTML untuk nilai awal. Pemisah baris dan spasi di antara tag-nya memengaruhi konten, jadi periksa bahwa indentasi format tidak memperkenalkan input yang tidak diinginkan.

Atribut	Peran dan keterbatasan
`rows`, `cols`	Tetapkan jumlah baris yang terlihat dan lebar yang diukur dalam lebar karakter rata-rata menggunakan bilangan bulat positif. Mereka tidak membatasi baris atau karakter input; lebar dan tinggi CSS juga memengaruhi tampilan.
`placeholder`	Petunjuk yang ditampilkan ketika nilai kosong. Ini tidak dikirim sebagai nilai sebenarnya dan menghilang saat mengetik, sehingga tidak menggantikan label terpisah.
`required`	Memblokir pengiriman form biasa ketika kosong. Ini tidak memutuskan apakah teks yang hanya berisi spasi dianggap bermakna.
`minlength`, `maxlength`	Membatasi panjang minimum dan maksimum dari nilai yang dimasukkan pengguna dalam satuan kode UTF-16. Satu emoji dapat menggunakan dua atau lebih satuan. Hanya menentukan minimum memungkinkan nilai kosong; gabungkan dengan required untuk input wajib.
`readonly`	Mencegah pengguna mengedit tetapi tetap memungkinkan fokus dan menyalin. Dengan nama, tetap disertakan dalam data form.
`disabled`	Menonaktifkan kontrol dan mengecualikannya dari data form serta validasi batasan.

Jalankan contoh input multibaris lengkap

Simpan kode lengkap ini sebagai textarea.html dan buka di browser. Tidak diperlukan server atau pustaka tambahan. Tombol submit menampilkan entri nama/nilai browser alih-alih mengirimkannya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Input textarea dan nilai kiriman</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Tulis pertanyaan</h1>
  <form id="demo">
    <label for="message">Pesan (5–200 unit kode)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Jelaskan masalah dan hasil yang diinginkan.">Ini baris pertama.
Ini baris kedua.</textarea>
    <label for="reference">Panduan hanya baca</label>
    <textarea id="reference" name="reference" rows="2" readonly>Sertakan nomor pesanan.</textarea>
    <label for="locked">Bidang dinonaktifkan</label>
    <textarea id="locked" name="locked" rows="2" disabled>Nilai ini tidak disertakan dalam pengiriman.</textarea>
    <button type="submit">Tampilkan nilai kiriman</button>
    <button type="reset">Atur ulang</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

Kirim form awal: message dan reference muncul. JSON \n menunjukkan pemisah baris dalam nilai; locked diabaikan.
Bersihkan pesan dan submit: validasi required memblokirnya. Kemudian langsung ketik dua atau tiga karakter biasa dan submit untuk memeriksa validasi panjang minimum.
Masukkan <b>Practice</b> sebagai pesan dan submit. Karena input dan output adalah teks, hasil menunjukkan teks berbentuk tag alih-alih teks tebal.
Reset mengembalikan pesan dua baris asli dan menghapus hasil. Reset kembali ke default HTML daripada membuat nilainya kosong.

Validasi browser asli membantu dengan input pengguna dan pengiriman formulir biasa. Pemeriksaan yang sama tidak dijamin untuk nilai yang diberikan oleh skrip, jadi aplikasi nyata harus memvalidasi nilai yang diperlukan, panjang yang diizinkan, dan format di server juga.

Membedakan pembungkusan visual dari pemutusan baris yang sebenarnya

Pembungkusan visual akibat lebar bidang berbeda dari pemisah baris yang dimasukkan dengan Enter. wrap="soft" bawaan tidak menambahkan pemecahan baris yang dikirim hanya karena teks membungkus secara visual. wrap="hard" menambahkan pemecahan baris yang dikirim sesuai dengan lebar kolom yang ditentukan dan membutuhkan cols. Untuk menyesuaikan layar sempit, mulai dengan pembungkusan bawaan dan lebar CSS.

max-width: 100% pada contoh membantu menjaga bidang tetap dalam induknya pada layar sempit, sementara resize: vertical memungkinkan pengguna mengubah tingginya. Lebar piksel cols="32" tergantung pada font, lebar karakter, dan browser, jadi jangan menganggap persis 32 karakter muat dalam satu baris.

Baca nilai dalam JavaScript dan validasi di server

Baca input saat ini melalui textarea.value dan default melalui textarea.defaultValue. Untuk membaca editan pengguna, gunakan value, bukan textContent tag. Contoh ini menulis hasil ke textContent sehingga input tidak dijalankan sebagai HTML.

readonly dan disabled bukanlah kontrol keamanan. Pengguna dapat mengubah nilai melalui alat pengembang atau permintaan terpisah, jadi verifikasi nomor pesanan yang tidak dapat diubah atau data izin terhadap data server terpercaya. Jika server menghitung byte atau unit karakter lain, periksa apakah batasnya menggunakan ukuran yang sama seperti maxlength di browser.

Referensi textarea referensi textarea di MDN menjelaskan atribut dan batasannya.

Referensi HTML