Cara Pemakaian dan Fungsi Tag Textarea Form

belajar HTML dan CSS untuk pemula

Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita sudah memakai tag Textarea, tetapi dalam tutorial saat ini saya akan mendiskusikannya dengan lebih dalam.

Fungsi Tag Textarea pada Form HTML

Objek form textarea dipakai untuk membuat text inputan yang dapat menampung lebih dari 1 baris inputan. Tag textarea serupa dengan tag input type text, tetapi mempunyai kelebihan untuk menampung beberapa baris. Pada umumnya textarea dipakai untuk inputan yang panjang, seperti komentar, keterangan, atau catatan.

Untuk memakai textarea, kita cukup membuat tag textarea sebagai berikut:

<textarea></textarea>

Diantara tag pembuka dan penutup bisa disisipkan text yang akan ditampilkan sebagai isian awal dari text lokasi seperti berikut ini:

<textarea>Silahkan isi komentar kamu</textarea>

Fungsi Atribut name

Meskipun tidak mesti, tetapi bila text lokasi dipakai di dalam form, maka atribut name berguna sebagai identitas dari tag textarea itu. Identitas ini dibutuhkan di saat pemrosesan di sisi server (contohnya memakai PHP). Atribut name inilah yang akan jadi varibel penampung nilai yang dipilih oleh user. Atribut name ditaruh di dalam tag textarea:

<textarea name="komentar">Silahkan isi komentar kamu</textarea>

Fungsi Atribut cols dan rows

Kedua atribut ini berguna untuk membatasi tampilan lebar kolom(cols) dan tinggi baris (rows) dari textarea. Nilai yang diinput ialah jumlah karakter yang jadi lebar dari text lokasi. Misalnya kita membuat atribut cols=”40”, maka text lokasi akan mempunyai lebar 40 karakter. Tetapi lebar ini tak akan persis sama dengan 40 karakter, sebab akan bergantung font, serta jenis huruf yang diinput.

Contoh pemakaian atribut cols dan rows:

<textarea cols="40">Silahkan isi komentar kamu</textarea>
<textarea cols="40" rows="10">Silahkan isi komentar kamu</textarea>

Fungsi Atribut disabled dan readonly

Atribut disabled dan readonly dipakai untuk membuat textarea tidak dapat dipakai. Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum. Misalnya sebuah textarea cuma bisa diisi saat user sudah mengisi kotak isian lainnya.

Kedua atribut ini cuma mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:

<textarea readonly="readonly">Silahkan isi komentar kamu</textarea>
<textarea disabled="disabled">Silahkan isi komentar kamu</textarea>

Meskipun kedua textarea yang mempunyai atribut ini tidak dapat dipakai, tetapi keduanya akan mempunyai tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly terlihat seperti kotak text biasa.

Sehingga pada umumnya atribut disabled lah yang biasa dipakai, sebab akan memberikan tampilan kepada user bahwa kotak text itu tidak dapat dipakai.

Atribut id dan class: CSS dan Javascript

Selain atribut name, value, cols, rows, disabled dan readonly , kita juga dapat memakai atribut umum seperti id dan class dalam tag textarea. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian Tag Textarea dalam form HTML

Untuk merangkum semua contoh atribut dari tag textarea yang sudah kita pelajari disini, saya akan membuat contoh cara penggunaannya di dalam form HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Textarea HTML</title>
</head>
<body>
<form action="proses.php" method="get">
<h4>Tag textarea dengan atribut: name</h4>
<textarea name="komentar1">
Silahkan isi komentar kamu
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + cols="40"</h4>
<textarea name="komentar2" cols="40">
Silahkan isi komentar kamu
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>
<textarea name="komentar3" cols="40" rows="5">
Silahkan isi komentar kamu
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + readonly</h4>
<textarea name="komentar4" readonly="readonly">
Silahkan isi komentar kamu
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + disabled</h4>
<textarea name="komentar5" disabled="disabled">
Silahkan isi komentar kamu
</textarea>
</form>
</body>
</html>

Textarea kadang diperlukan untuk inputan form yang memerlukan kalimat yang panjang seperti komentar.

Tutorial HTML tentang Fungsi dan Cara Pemakaian Tag Textarea ini menutup tutorial singkat tentang pembuatan form HTML. Bila kamu sudah mempelajari dari part 1 sampai 11, maka kamu setidaknya sudah menguasai kebanyakan tag dan atribut-atribut tentang form HTML.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *