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>

<!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

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>

<!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

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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>

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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>

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>

<!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>

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>

<!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>

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>

<!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>

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>

<!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>

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>

<!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)
}

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>

<!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>

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>

<!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>

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 */

Judul	`HTML textarea Tag`
Label	`HTML`
Diposting pada	`12 Desember 2017 - 21:02`
Diperbaharui pada	`22 Mei 2018 - 10:01`

Tutorial HTML `<texarea>`

Contoh HTML `<texarea>`

Attribute HTML `<texarea>`

Global Attributes:

Event Attributes:

Browser Support :

Default CSS :

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label

HTML textarea Tag

Tutorial HTML <texarea>

Contoh HTML <texarea>

Attribute HTML <texarea>

Global Attributes:

Event Attributes:

Browser Support :

Default CSS :

Post Info

Populer Post

Arsip Blog

Label

Tutorial HTML `<texarea>`

Contoh HTML `<texarea>`

Attribute HTML `<texarea>`