HTML Tag Textarea: Membuat Input Teks Panjang

Apa Itu HTML Tag Textarea?

HTML tag <textarea> adalah elemen formulir (form element) yang digunakan untuk membuat area teks multi-baris di dalam halaman web. Elemen ini memungkinkan pengguna untuk memasukkan teks yang lebih panjang dibandingkan dengan input teks biasa, sehingga sangat cocok digunakan untuk menulis komentar, pesan, deskripsi, ulasan, atau catatan.

Berbeda dengan elemen <input type="text"> yang hanya menyediakan satu baris teks, <textarea> memberikan ruang yang lebih luas bagi pengguna untuk mengetik banyak baris teks. Oleh karena itu, elemen ini sering digunakan dalam formulir kontak, kolom komentar pada blog, formulir pendaftaran, maupun fitur pengiriman pesan di sebuah website.

Tag <textarea> juga memiliki beberapa atribut yang dapat mengatur ukuran dan perilakunya. Misalnya, atribut rows digunakan untuk menentukan jumlah baris teks yang terlihat, sedangkan atribut cols menentukan lebar area teks. Dengan menggunakan atribut ini, pengembang dapat menyesuaikan ukuran textarea sesuai dengan kebutuhan desain halaman.

Selain itu, tampilan <textarea> juga dapat diatur menggunakan CSS, seperti mengubah ukuran, warna latar belakang, jenis font, jarak antar teks, dan bahkan menambahkan efek saat pengguna mulai mengetik. Beberapa pengembang juga menambahkan fitur tambahan menggunakan JavaScript, seperti menghitung jumlah karakter, membatasi panjang teks, atau menampilkan pesan peringatan jika teks terlalu panjang.

Karena kemampuannya menampung teks dalam jumlah besar, tag <textarea> menjadi salah satu elemen penting dalam pembuatan formulir pada website modern. Elemen ini membantu pengguna menyampaikan informasi secara lebih lengkap dan memudahkan pengembang dalam mengumpulkan data yang lebih detail dari pengguna.

Fungsi Tag <textarea>

Membuat kotak teks multi-baris
Berbeda dengan <input>, <textarea> dapat menampung teks yang panjang dan lebih dari satu baris.
Digunakan dalam form
Biasanya dipakai untuk:
- Pesan
- Komentar
- Saran
- Alamat
Bisa diatur ukurannya
Ukuran kotak dapat diatur menggunakan atribut rows dan cols, atau dengan CSS.
Dapat diproses dengan JavaScript
Isi dari textarea bisa diambil atau dimanipulasi menggunakan JavaScript.

Struktur Dasar HTML Tag Textarea

<textarea rows="4" cols="50">
Tulis pesan Anda di sini...
  </textarea>

Penjelasan:

rows → jumlah baris teks
cols → lebar kolom textarea

Contoh Penggunaan HTML Tag Textarea

1. Textarea Sederhana

Tag <textarea> digunakan untuk membuat kolom input teks panjang yang dapat diisi oleh pengguna.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Sederhana</title>
</head>
<body>

<textarea>Selamat Datang</textarea>

</body>
</html>

penjelasan: Textarea membuat area input teks yang lebih besar dibanding input biasa.

2. Textarea dengan Ukuran

Textarea dapat menggunakan atribut rows dan cols untuk menentukan jumlah baris dan lebar area teks.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Ukuran</title>
</head>
<body>

<textarea rows="5" cols="30">1. ...
2. ...
3. ...
4. ...
5. ...
</textarea>

</body>
</html>

penjelasan: Rows dan cols menentukan ukuran area teks.

3. Textarea dengan Placeholder

Atribut placeholder digunakan untuk menampilkan teks petunjuk sebelum pengguna mengetik di textarea.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Placeholder</title>
</head>
<body>

<textarea placeholder="Tulis pesan Anda di sini"></textarea>

</body>
</html>

penjelasan: Placeholder memberi petunjuk kepada pengguna.

4. Textarea di Dalam Form

Textarea sering digunakan di dalam form untuk mengumpulkan pesan atau komentar dari pengguna.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Form</title>
</head>
<body>

<form>
<label>Pesan:</label><br>
<textarea rows="4" cols="40"></textarea>
</form>

</body>
</html>

penjelasan: Textarea biasanya digunakan untuk form pesan atau komentar.

5. Textarea dengan Nilai Awal

Textarea dapat memiliki teks awal yang sudah ditentukan di dalam elemen sebelum pengguna mengeditnya.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Nilai Awal</title>
</head>
<body>

<textarea rows="4" cols="30">
Ini adalah teks awal.
</textarea>

</body>
</html>

penjelasan: Isi textarea dapat ditentukan langsung di dalam tag.

6. Textarea dengan CSS Styling

Textarea dapat diberi gaya menggunakan CSS untuk mengubah ukuran, warna, atau tampilan area input.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea CSS</title>
    <style>
        textarea{
            width:300px;
            height:100px;
            border:2px solid gray;
        }
    </style>
</head>
<body>

<textarea></textarea>

</body>
</html>

penjelasan: CSS dapat mengatur tampilan textarea.

7. Textarea dengan Disabled

Atribut disabled digunakan untuk menonaktifkan textarea sehingga tidak dapat diisi oleh pengguna.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Disabled</title>
</head>
<body>

<textarea disabled>Textarea tidak bisa diubah</textarea>

</body>
</html>

penjelasan: Disabled membuat textarea tidak dapat diedit.

8. Textarea dengan JavaScript

Textarea dapat digunakan bersama JavaScript untuk mengambil atau memanipulasi isi teks yang dimasukkan pengguna.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea JavaScript</title>
</head>
<body>

<textarea id="pesan"></textarea>
<br>
<button onclick="tampilPesan()">Tampilkan</button>

<script>
function tampilPesan(){
    alert(document.getElementById("pesan").value);
}
</script>

</body>
</html>

penjelasan: JavaScript dapat mengambil isi textarea menggunakan id.

Atribut Penting HTML Tag Textarea

Atribut	Fungsi	Contoh
name	Nama textarea untuk form submission	`<textarea name="message">`
rows	Jumlah baris textarea	`<textarea rows="5">`
cols	Jumlah kolom (lebar) textarea	`<textarea cols="40">`
placeholder	Teks petunjuk di dalam textarea	`<textarea placeholder="Masukkan teks...">`
disabled	Menonaktifkan input pengguna	`<textarea disabled>`
readonly	Membuat textarea hanya baca	`<textarea readonly>`
required	Mewajibkan input sebelum submit	`<textarea required>`
maxlength	Membatasi jumlah karakter	`<textarea maxlength="200">`
wrap	Menentukan bagaimana teks dibungkus	`<textarea wrap="soft">`

Atribut Global yang Didukung HTML Tag Textarea

Atribut	Fungsi	Contoh
id	Identitas unik	`<textarea id="comment">`
class	Kelas CSS	`<textarea class="input-area">`
style	Styling inline	`<textarea style="border:1px solid red">`
title	Keterangan tambahan	`<textarea title="Pesan pengguna">`
lang	Bahasa teks	`<textarea lang="en">`
dir	Arah teks	`<textarea dir="ltr">`
hidden	Menyembunyikan elemen	`<textarea hidden>`
data-*	Data kustom tambahan	`<textarea data-type="feedback">`

Manfaat Menggunakan HTML Tag Textarea

Menyediakan input multi-baris untuk pengguna
Mempermudah pengumpulan komentar, deskripsi, dan catatan panjang
Mendukung validasi dengan atribut seperti required dan maxlength
Dapat dikustomisasi menggunakan CSS dan atribut global
Mendukung integrasi dengan JavaScript untuk manipulasi dinamis

Best Practice Penggunaan Tag Textarea

Gunakan untuk input teks panjang atau multi-baris
Selalu gunakan label yang jelas untuk aksesibilitas
Gunakan placeholder untuk memberikan petunjuk
Gunakan atribut maxlength untuk membatasi karakter
Kombinasikan dengan CSS agar sesuai desain halaman

Kesimpulan

HTML tag <textarea> adalah elemen form penting untuk input teks multi-baris. Dengan atribut yang fleksibel, textarea memungkinkan pengalaman pengguna yang lebih baik untuk mengisi komentar, deskripsi, atau catatan panjang dalam form web.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Cara Menggunakan HTML Tag textarea