Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <textarea> Pada HTML

previous Previous Page

Elemen <textarea> Pada HTML digunakan untuk menciptakan input area teks dengan jumlah karakter / teks tidak terbatas. Jika elemen <input> hanya menampilkan teks dalam satu baris, namun elemen <textarea> menampilkan teks dalam bentuk multi baris, sehingga memudahkan dalam hal pengeditan datanya. Pada tampilan standarnya, <textarea> ditampilkan dalam bentuk font monospace.

Elemen <textarea> biasanya digunakan untuk memasukkan data dalam jumlah yang banyak, dan isinya dapat beraneka ragam. Misalnya untuk menampung komentar, kolom review, yang sudah tidak mungkin lagi menggunakan input dalam bentuk single line. Nilai / value dari textarea dapat diisikan langsung pada bilah inputan textarea pada browser, ataupun diisikan langsung diantara tag <textarea> dan </textarea> jika menginginkan nilai tersebut sebagai nilai default isian.

Contoh Sederhana Pada <textarea>

Berikut ini contoh <textarea> sederhana, tanpa memberikan modifikasi atribut, anda bisa memasukkan data langsung pada bilah <textarea> pada browser :

1.  <textarea placeholder="Silahkan masukkan sembarang character.."></textarea>

Jika dijalankan akan menghasilkan tampilan :

Anda dapat memberi nilai langsung pada <textarea>, sehingga saat pertama kali halaman dimuat, maka nilai tersebut akan muncul. Berikut ini contoh <textarea> yang sudah diberikan nilai / value. Nilai tersebut diletakkan diantara tag <textarea> </textarea> :

1.  <textarea>Ini adalah teks default..</textarea>

Jika dijalankan akan menghasilkan tampilan :

Atribut Khusus

Tampilan default pada textarea terlihat kecil dan sempit, anda bisa menyesuaikan tampilan sesuai dengan kebutuhan. Atribut yang sering digunakan seperti atribut "cols", untuk menyetel lebar kolom berdasarkan jumlah character di dalam <textarea> dalam satu baris dan atribut "rows" untuk menyetel tinggi elemen berdasarkan jumlah baris teks dalam <textarea>. Jika anda tidak ingin menyertakan kedua atribut tersebut, cukup dengan memodifikasi lebar dan tinggi elemen dengan CSS misalnya textarea{width:660px; height:330px;}

Berikut ini atribut khusus yang digunakan untuk mengatur <textarea> pada HTML :

  • name
    Menetapkan nama elemen textarea yang akan dikirim ke server.
  • cols
    Menetapkan lebar elemen berdasarkan jumlah character yang terlihat pada textarea atau dengan kata lain jumlah character yang dapat dimuat dalam satu baris di dalam textarea.
  • rows
    Menetapkan jumlah baris teks di dalam textarea.
  • autofocus
    Menentukan elemen textarea agar tersorot pertama kali saat browser dimuat. Nilai : autofocus
  • maxlength
    Menetapkan jumlah maksimal karakter yang harus diisikan di bilah inputan, jika melebihi jumlah maksimalnya, bilah input tersebut tidak dapat diisikan karakter lagi.
    Nilai : number (angka).
  • required
    Menentukan elemen textarea harus diisi dan tidak kosong sebelum data dikirim ke server saat tombol submit ditekan. Nilai : required
  • placeholder
    Menentukan petunjuk singkat (hint) pada elemen input. Jika elemen tersebut disorot, teks petujuk singkat tersebut akan menghilang.
    Nilai : teks
  • disabled
    Menetapkan elemen textarea menjadi nonaktif dan tidak bisa dipilih atau disorot. Nilai : disabled
  • readonly
    Menetapkan elemen textarea tersebut hanya dapat dibaca, tidak untuk diedit. Nilai : readonly
  • form
    Menetapkan elemen <form> tempat texarea menginduk. Artinya textarea dapat ditempatkan dimanapun, saat form induknya disubmit / dikirimkan ke server maka data pada textarea akan ikut terkirim bersama data form induknya.
    Nilai : id_form

Berikut ini contoh penggunaan elemen <textarea> pada HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag textarea HTML</title>
6.  </head>
7.  <body>
8.     <form action="proses.php" method="post">
9.       <fieldset>
10.      <legend>Kirim komentar di sini..</legend>
11.      <p>
12.      <label for="nama">Nama</label>
13.      <input type="text" name="nama" id="nama" required autocomplete maxlength="50">
14.      </p>
15.      <p>
16.      <label for="email">Email</label>
17.      <input type="email" name="email" id="email" required>
18.      </p>
19.      <p>
20.      <label for="komentar">Komentar</label>
21.      <textarea cols="50" rows="10" id="komentar" required></textarea>
22.      </p>
23.      <p>
24.      <input type="submit" value="Kirim">
25.      <input type="reset" value="Reset">
26.      </p>
27.      </fieldset>
28.    </form>
29. </body>
30. </html>
31. 
32. 

Jika dijalankan akan menghasilkan tampilan di bawah ini :

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<textarea>yayayayaya

Global Attributes :

Tag <textarea> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <textarea> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <textarea> pada HTML :

/* Tak ada */

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML