Cara Membuat Text Area di HTML

Diposting Dylan Daniswara Santosa, S.Kom.

Dalam pengembangan situs web, elemen <textarea> berguna untuk menciptakan area teks yang lebih besar dalam formulir HTML. Komponen ini memungkinkan pengguna untuk memasukkan teks dalam volume yang lebih besar, seperti komentar, deskripsi, atau pesan panjang. Dalam kesempatan ini, kita akan mengulas langkah demi langkah cara membuat elemen <textarea> pada kode HTML.

1. Pengenalan dengan Elemen <textarea>

Elemen <textarea> merupakan tag HTML yang digunakan untuk membentuk ruang teks yang dapat diisi oleh pengunjung. Berbeda dengan tag <input> yang ditujukan untuk input teks singkat, elemen <textarea> memungkinkan input teks dalam kapasitas yang lebih besar.

Berikut contoh penggunaan elemen <textarea>:

<textarea rows="4" cols="50">
Silakan tuliskan teks di sini...
</textarea>

Pada contoh di atas, atribut rows dan cols digunakan untuk mengatur jumlah baris dan kolom dalam area teks.

2. Langkah-langkah Membangun Elemen <textarea>

Berikut adalah instruksi langkah demi langkah untuk menciptakan elemen <textarea> di dalam kode HTML:

Langkah 1: Mulai dengan Kode HTML

Langkah pertama adalah menyiapkan kode HTML yang sah. Anda bisa memulainya dengan menambahkan tag <html>, <head>, dan <body>.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Area Teks</title>
</head>
<body>
</body>
</html>

Langkah 2: Sisipkan Elemen <textarea>

Di dalam bagian <body>, sisipkan elemen <textarea>. Anda dapat menentukan atribut seperti rows, cols, dan teks awal yang ingin ditampilkan dalam elemen ini.

<textarea rows="4" cols="50">
Isikan teks di sini...
</textarea>

Langkah 3: Tambahkan Label

Disarankan untuk menambahkan label pada elemen <textarea>, agar pengguna tahu tujuan dari area teks tersebut. Gunakan tag <label> dengan atribut for yang sama dengan atribut id pada elemen </textarea>.

<label for="pesan">Masukkan Pesan:</label>
<textarea id="pesan" rows="4" cols="50">
Isikan pesan di sini...
</textarea>

Langkah 4: Proses Pengiriman Data (Opsional)

Apabila elemen <textarea> terletak dalam suatu formulir dan Anda berencana mengirimkan data yang dimasukkan pengguna ke server, pastikan elemen <textarea> dikelompokkan dalam tag <form>. Sertakan atribut action dan method pada tag <form> untuk menentukan tujuan URL dan metode pengiriman data.

<form action="proses.php" method="post">
    <label for="pesan">Masukkan Pesan:</label>
    <textarea id="pesan" name="pesan" rows="4" cols="50">
    Isikan pesan di sini...
    </textarea>
    <br>
    <input type="submit" value="Kirim">
</form>

Penutup

Elemen <textarea> membuktikan kegunaannya dalam pembuatan formulir HTML yang mengharuskan input teks dalam jumlah besar. Dengan memanfaatkan atribut rows, cols, dan mengelompokkan elemen dalam tag <form>, Anda mampu membuat area teks sesuai keperluan. Jangan lupa menyertakan label yang jelas agar pengguna memahami tujuan dari area teks ini.

Widget HTML #1