Tutorial Form HTML Part 11: Fungsi dan Cara Penggunaan Tag Textarea Form HTML

Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah menggunakan tag Textarea, namun dalam tutorial kali ini saya akan membahasnya dengan lebih dalam.


Fungsi Tag Textarea dalam pembuatan Form HTML

Objek form textarea digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau catatan.

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

<textarea></textarea>

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

<textarea>Silahkan isi komentar anda</textarea>

Atribut name: Untuk pemrosesan Tag Textarea

Walaupun tidak harus, namun jika text area digunakan di dalam form, maka atribut name berfungsi sebagai identitas dari tag textarea tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag textarea:

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

Atribut cols dan rows: Menentukan Lebar dan Tinggi Textarea

Kedua atribut ini berfungsi untuk membatasi tampilan lebar kolom(cols) dan tinggi baris (rows) dari textarea. Nilai yang diinput adalah jumlah karakter yang menjadi lebar dari text area. Misalkan kita membuat atribut cols="40", maka text area akan memiliki lebar 40 karakter. Namun lebar ini tidak akan persis sama dengan 40 karakter, karena akan tergantung font, serta jenis huruf yang diinput.

Contoh penggunaan atribut cols dan rows:

<textarea cols="40">Silahkan isi komentar anda</textarea>

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

Atribut disabled dan readonly: menonaktifkan tag Textarea

Atribut disabled dan readonly digunakan untuk membuat textarea tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah textarea hanya dapat diisi ketika user telah mengisi kotak isian lainnya.

Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled="disabled" dan readonly ="readonly". Berikut contoh penulisannya:

<textarea readonly="readonly">Silahkan isi komentar anda</textarea>

<textarea disabled="disabled">Silahkan isi komentar anda</textarea>

Walaupun kedua textarea yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa.

Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tidak bisa digunakan.


Atribut id dan class: CSS dan Javascript

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


Cara Penggunaan Tag Textarea dalam form HTML

Untuk merangkum seluruh contoh atribut dari tag textarea yang telah 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 anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + cols="40"</h4>
   <textarea name="komentar2" cols="40">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>
   <textarea name="komentar3" cols="40" rows="5">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + readonly</h4>
   <textarea name="komentar4" readonly="readonly">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + disabled</h4>
   <textarea name="komentar5" disabled="disabled">
     Silahkan isi komentar anda
   </textarea>

   </form>

</body>
</html>

Tutorial Pembuatan Form HTML - Contoh Cara Penggunaan Tag TextareaTextarea kadang dibutuhkan untuk inputan form yang membutuhkan kalimat yang panjang seperti komentar.


Tutorial HTML tentang Fungsi dan Cara Penggunaan Tag Textarea ini menutup tutorial singkat tentang pembuatan form HTML. Jika anda telah mempelajari dari part 1 sampai 11, maka anda setidaknya telah menguasai sebagian besar tag dan atribut-atribut tentang form HTML.

38 Comments

  1. situsku
    10 Aug 14
  2. Anonymous
    25 Oct 14
  3. sri
    05 Apr 15
  4. Anonymous
    30 Aug 15
  5. faizal
    03 Sep 15
  6. dayat
    29 Sep 15
  7. William
    30 Oct 15
    • Andre
      30 Oct 15
      • Anonymous
        30 Oct 15
        • Andre
          30 Oct 15
    • Rimba Prayoga
      12 Jan 17
  8. dita arnita
    29 Feb 16
    • Andre
      01 Mar 16
  9. fandi
    26 Sep 16
  10. Jack
    28 Oct 16
  11. Jack
    28 Oct 16
    • Andre
      29 Oct 16
  12. Agung design
    19 Apr 17
  13. fadixz
    29 Sep 17
    • fadixz
      29 Sep 17
  14. ridlo
    06 Feb 18
    • Andre
      08 Feb 18
  15. Anonymous
    17 Jun 18
    • Andre
      19 Jun 18
  16. Anonymous
    11 Oct 18
    • Andre
      12 Oct 18
  17. Abdi
    05 Nov 18
    • Andre
      06 Nov 18
  18. Asassen
    28 Feb 19
    • Andre
      01 Mar 19
    • Andre
      04 Apr 19
  19. ahmad sayuti
    14 Oct 19
    • ahmad sayuti
      14 Oct 19
    • Anonymous
      10 Dec 20
  20. frans
    23 Oct 19
  21. Anak Toraja
    21 May 21

Add Comment

Leave a Reply to Andre Cancel reply