tRikSonic
Tema

HTML textarea Tag

Terakhir diperbarui : 22 Mei 2018 - 10.01

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.
html font

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 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>
<!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 20
Contoh :
<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 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>
<!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 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>
<!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
ElementChromeSafariFirefoxOperaIE / Edge
<textarea>YaYaYaYaYa

Default CSS :

Browser yang support dengan element <textarea>, mempunyai nilai default :
/* tidak ada */
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.