HTML textarea Tag

Tutorial HTML <texarea>

Element HTML <texarea> digunakan untuk kontrol teks input multi baris. Secara default element ini dapat menampung karakter dengan jumlah tak terbatas, dan ukuran font didalamnya berukuran sama.

Contoh HTML <texarea>

<textarea>...</textarea>

Attribute HTML <texarea>

autocapitalize

Attribute ini adalah attribute yang tidak standart, yang berlaku untuk Webkit IOS (baik itu firefox, chrome, dan safari).

Attribute ini berfungsi sebagai kontrol apakah teks didalam textarea secara otomatis diKapitalisasi atau tidak.

Nilai atau value dari attribute ini adalah sebagai berikut :

• none : Menonaktifkan kapitalisasi otomatis
• sentences : Menentukan huruf pertama pada kalimat akan otomatis terKapitalisasi
• words : Menentukan setiap kata akan otomatis terKapitalisasi
• characters : Menentukan semua karakter akan otomatis terKapitalisasi
• on : Tidak berlaku sejak IOS 5
• off : Tidak berlaku sejak IOS 5

Contoh :

<textarea autocapitalize="words">
Hypertext Markup Language (HTML) adalah sebuah bahasa markah 
yang digunakan untuk membuat sebuah halaman web.
</textarea>

autocomplete

Attribute ini berfungsi apakah textarea memiliki fungsi otomatis selesai atau tidak. Attribute ini berfungsi jika user telah melakukan penginputan data sebelumnya, maka browser akan bertugas mengeksekusinya.

Contoh :

<form>
  <textarea autocomplete="on"></textarea>
</form>

Nilai atau value ini adalah on dan off

autofocus

Attribute ini digunakan untuk memberikan effect focus pada textarea

Attribute ini bersifat boolean yang artinya bisa dituliskan nilai atau valuenya ataupun tidak disebutkan.

Contoh :

<textarea autofocus="autofocus"></textarea>

Nilai atau value ini adalah autofocus

cols

Attribute ini digunakan sebagai kontrol yang mengatur lebar dari element textarea, jika attribute ini tidak ditulis dan tidak ada pengaturan pada css, maka textarea memiliki nilai default yaitu 20

Contoh :

<textarea cols="40" rows="10"></textarea>

Nilai atau value ini adalah nomor

dirname

Attribute ini digunakan untuk menentukan arah teks seperti bidang textarea ketika formulir dikirim, element ini terkait dengan html <form>...</form>

Nilai atau value ini adalah namatextarea.dir

disabled

Attribute ini berfungsi sebagai kontrol yang menentukan bahwa textarea menjadi nonaktif atau tidak berfungsi

Attribute ini bersifat boolean, artinya nilai atau value attribute ini bisa dituliskan ataupun tidak

Contoh :

<textarea disabled="disabled">
Masukan teks disini
</textarea>

Nilai atau value ini adalah disabled

form

Attribute ini digunakan mengontrol textarea terhadap element <form>. Nilai dari attribute ini mengambil attribute ID element <form>

Dengan sematan attribute ini mumungkinkan element textarea berada diluar element form, tetapi masih sebagai bagian element form tersebut.

Contoh :

<form id="demo">
  <input type="text"/>
  <input type="submit"/>
</form>

<p>
  <textarea form="demo"></textarea>
</p>

Nilai atau value ini adalah form_id

maxlength

Attribute ini digunakan untuk menentukan batasan maksimal karakter yang bisa dimasukan oleh user

Contoh :

<textarea maxlength="15"></textarea>

Nilai atau value ini adalah Nomor

minlength

Attribute ini digunakan untuk menentukan minimal karakter yang harus dimasukan oleh user

Contoh :

<form>
  <textarea minlength="1000" required></textarea>
  <input type="submit"/>
</form>

Nilai atau value ini adalah Nomor

name

Menentukan nama dari textarea

Nilai atau value ini adalah text

placeholder

Attribute ini digunakan untuk memberikan petunjuk singkat, guna memberitahu user/pengunjung tentang untuk apa element textarea tersebut.

Contoh :

<p>
  <textarea cols="50" placeholder="Kriteria singkat tentang anda"></textarea>
</p>

<p>
  <textarea cols="50" placeholder="Komentar kamu disini"></textarea>
</p>

Nilai atau value ini adalah Teks

readonly

Attribute ini digunakan untuk kontrol element agar teks textarea hanya bisa dibaca dan tidak bisa diedit/dirubah oleh user

Attribute ini bersifat boolean, yang artinya nilai dari value ini bisa diberikan ataupun tidak.

Contoh :

<textarea cols="50" readonly="readonly">
 Teks ini tidak bisa dirubah
</textarea>

Nilai atau value ini adalah readonly

required

Attribute ini digunakan untuk menentukan bahwa element textarea harus diisi dan tidak boleh kosong

Attribute ini bersifat boolean, yang artinya nilai dari value ini bisa diberikan ataupun tidak.

Contoh :

<form>
 <textarea id="textarea" required="required"></textarea>
   <br/>
 <input id="click" type="submit" value="submit"/>
</form>

Nilai atau value ini adalah required

rows

Attribute ini digunakan untuk menentukan tinggi dari element textarea, cara perhitungannya adalah dengan menentukan jumlah baris, maksudnya jika melakukan enter pada baris pertama maka posisi selanjutnya bernilai dua

Secara default attribute ini bernilai 2(dua)

Contoh :

<textarea rows="1">1 = 1 baris</textarea>
<textarea rows="2">2 = 2 baris</textarea>
<textarea rows="3">3 = 3 baris</textarea>
<textarea rows="8">8 = 8 baris</textarea>

Nilai atau value ini adalah nomor, tidak berlaku untuk sematan fungsi operasi, seperti penambahan, pengurangan, dsb., misal : -5, +10, *8

wrap

Attribute ini digunakan untuk menentukan bagaimana teks didalam textarea menjatuhkan dirinya menjadi baris baru jika teks sudah mencapai batas tepi.

Contoh :

<textarea wrap="hard" cols="30">
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.
</textarea>

<textarea wrap="soft" cols="30">
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.
</textarea>

<textarea wrap="off" cols="30">
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.
</textarea>

Nilai atau value ini adalah hard, soft, dan off

Global Attributes:

Element <textarea> mencakup Global Attributes HTML.

Event Attributes:

Element <textarea> mencakup Event Attributes HTML.

Browser Support :

HTML
Element	Chrome	Safari	Firefox	Opera	IE / Edge
<textarea>	Ya	Ya	Ya	Ya	Ya

Default CSS :

Browser yang support dengan element <textarea>, mempunyai nilai default :

/* tidak ada */