Tag
<textarea> digunakan untuk menampung teks multi baris. Pada HTML5 <textarea> ditambahkan fitur-fitur di antaranya
autofocus,
maxlength dan
minlength. Fitur-fitur ini membuat texarea tak hanya berfungsi sebagai media penampung teks saja tetapi sudah lebih interaktif.
Atribut dasar <textarea> adalah:
cols: lebar rata-rata karakter di dalam textarea, diisi dengan nilai integer. Nilai defaultnya 20.
rows: tinggi rata-rata karakter di dalam textarea.
name: nama variabel textarea.
disabled: textarea dinonaktifkan.
readonly: teks yang ada di dalam textarea tidak dapat diedit, hanya ditampilkan saja.
Contoh:
textarea.html dengan name=deskripsi, cols=22, rows=10 dan disertai teks (bawaan), bisanya kosong.
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh tag textarea html</title>
<style type="text/css">
</style>
</head>
<body>
<textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
</body>
</html>
Output:
 |
| Output di Firefox. |
Contoh 2:
textarea2.html dengan atribut
readonly.
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh tag textarea html</title>
<style type="text/css">
</style>
</head>
<body>
<textarea name="deskripsi" cols="22" rows="10" readonly>Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
</body>
</html>
Untuk properti
disabled sama seperti contoh di atas ganti
readonly dengan
disabled.
Textarea HTML5
Beberapa atribut textarea pada HTML5 adalah:
autofocus: posisi kursor fokus pada textarea padanya.
maxlength: membatasi (jumlah) karakter maksimal pada textarea, diisi dengan angka bulat (integer).
minlength: membatasi (jumlah) karakter minimal pada textarea,diisi dengan angka bulat (integer).
required: mengharuskan textarea harus diisi, tidak boleh kosong. Jika kosong timbul warna latar merah jambu sebagai tanda peringatan harus diisi.
placeholder: teks penanda sebagai informasi pengisian textarea. Teks placeholder akan hilang ketika user mengisi (mengetik) teks di textarea.
Catatan: atribut-atribut di atas tidak harus semua dideklarasikan, sesuaikan dengan kebutuhan saja.
Contoh:
textarea3.html dengan atribut autofocus, minlength dan required.
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh tag textarea html</title>
<style type="text/css">
</style>
</head>
<body>
<textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
<textarea name="deskripsi" cols="22" rows="10" maxlength="200" autofocus required>Ini teks di dalam textarea kedua.</textarea>
</body>
</html>
Untuk atribut minlength sama dengan maxlength, bila perlu tinggal ganti
maxlength dengan
minlength.
Contoh
textarea4.html dengan atribut placeholder dengan pesan: "Isi dengan data sebenarnya" yang mengharuskan user mengisi dengan data valid (tidak asal isi).
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh tag textarea html</title>
<style type="text/css">
</style>
</head>
<body>
<textarea name="deskripsi" cols="22" rows="10" maxlength="200" placeholder="Isi dengan data sebenarnya" required></textarea>
</body>
</html>
Selesai. Selamat mencoba!
