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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea> Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. </textarea> </body> </html>
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 otomatissentences
: Menentukan huruf pertama pada kalimat akan otomatis terKapitalisasiwords
: Menentukan setiap kata akan otomatis terKapitalisasicharacters
: Menentukan semua karakter akan otomatis terKapitalisasion
: Tidak berlaku sejak IOS 5off
: 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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea autocapitalize="words"> Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. </textarea> <p> Lihat kembali keterangan penjelasan. </p> </body> </html>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea { width: 100%; height: 100px; padding: 10px; outline: none; border-color: #3b8a98; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; resize: none; margin-top: 10px; margin-bottom: 10px; }
//javascript
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form> <textarea autocomplete="on"></textarea> </form> <p> Maaf Tidak befungsi pada editor live ini, akan berlaku saat page load yang sebenarnya. </p> </body> </html>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea { width: 100%; height: 100px; padding: 10px; outline: none; border-color: #3b8a98; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; resize: none; margin-top: 10px; margin-bottom: 10px; }
//javascript
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea autofocus="autofocus"></textarea> <p> Klik Tombol run untuk melihat fungsi attribute autofocus </p> </body> </html>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea { width: 100%; height: 100px; padding: 10px; outline: none; border-color: #3b8a98; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; resize: none; margin-top: 10px; margin-bottom: 10px; }
//javascript
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 20Contoh :
<textarea cols="40" rows="10"></textarea>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea cols="40" rows="10"></textarea> </body> </html>
dirname
Attribute ini digunakan untuk menentukan arah teks seperti bidang textarea ketika formulir dikirim, element ini terkait dengan html
<form>...</form>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea disabled="disabled"> Masukan teks disini </textarea> </body> </html>
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>
maxlength
Attribute ini digunakan untuk menentukan batasan maksimal karakter yang bisa dimasukan oleh user
Contoh :
<textarea maxlength="15"></textarea>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea maxlength="15"></textarea> <p> Maksimal karakter yang bisa dimasukan adalah 15, baik karakter ataupun spasi. </p> </body> </html>
minlength
Attribute ini digunakan untuk menentukan minimal karakter yang harus dimasukan oleh user
Contoh :
<form> <textarea minlength="1000" required></textarea> <input type="submit"/> </form>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form> <textarea minlength="1000" required></textarea> <input type="submit"/> </form> <p> Textarea diatas harus berjumlah 1000 karakter </p> </body> </html>
name
Menentukan nama dari
textarea
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <p> <textarea cols="50" placeholder="Kriteria singkat tentang anda"></textarea> </p> <p> <textarea cols="50" placeholder="Komentar kamu disini"></textarea> </p> </body> </html>
readonly
Attribute ini digunakan untuk kontrol element agar teks
textarea
hanya bisa dibaca dan tidak bisa diedit/dirubah oleh userAttribute 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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea cols="50" readonly="readonly"> Teks ini tidak bisa dirubah </textarea> <hr/> <textarea cols="50"> Yang ini bisa </textarea> </body> </html>
required
Attribute ini digunakan untuk menentukan bahwa element
textarea
harus diisi dan tidak boleh kosongAttribute 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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form> <textarea id="textarea" required="required"></textarea> <br/> <input id="click" type="submit" onclick="demo();" value="submit"/> </form> <p>Status : <span id="text-info"></span></p> </body> </html>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family : sans-serif; } textarea { width: 100%; height: 100px; padding: 10px; outline: none; border-color: #3b8a98; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; resize: none; margin-top: 10px; margin-bottom: 10px; } span { color: #222990; }
function demo() { var t = document.getElementById("textarea").value, e = document.getElementById("click"), n = document.getElementById("text-info"); return t.length < 1 ? (n.textContent = "Textarea tidak boleh kosong", e.setAttribute("type", "submit"), !0) : (n.textContent = "value = " + t, e.setAttribute("type", "button"), alert("Hanya untuk demo"), !1) }
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> textarea{ display :block; margin-bottom: 15px; width:50%; resize:none; } </style> </head> <body> <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> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> textarea{ display :block; margin-bottom: 15px; height : 80px; } </style> </head> <body> <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> </body> </html>
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 */