Belajar Kode CSS & Desain Blog: HTML textarea tag

Belajar CSS, tutorial css, javascript, demo online, html editor online, html, xHTML, tutorial desain blog, tutorial css3

Textarea merupakan sebuah elemen yang secara khusus berfungsi sebagai area bagi teks. Dikatakan demikian karena elemen ini hanya menampilkan teks dan tidak bagi yang lain. Semua teks ditampilkan seperti apa yang tertulis, sehingga ketika anda bermaksud menampilkan sebuah image dalam bentuk kode HTML di textarea, maka yang akan terlihat bukanlah image yang diinginkan, melainkan kode HTML seperti yang dituliskan. Sebagai contoh anda bisa melihatnya di bawah ini:

Textarea ditampilkan sebagai sebuah box dengan tinggi dan lebar yang dapat diatur melalui attribute rows (tinggi/height) dan cols (lebar/width) dengan nilai dalam bentuk angka.

<textarea cols="20" rows="6">
Text here!
</textarea>

Selain pengaturan dalam bentuk width/lebar dan height/tinggi melalui attribute cols dan rows, beberapa pengaturan yang lain dapat diberlakukan melalui beberapa attribute berbeda.

cols » Menentukan (untuk mengatur) lebar/width textarea, dimana nilai cols ekuivalen dengan jumlah karakter setiap baris, yang artinya lebar box textarea bergantung kepada nilai cols (jumlah karakter) dan ukuran font termasuk didalamnya jenis font (font-family).
rows » Menentukan (untuk mengatur) tinggi/height textarea. Tinggi box textarea diperhitungkan berdasar jumlah baris teks (sesuai nilai rows) sekaligus ukuran font dan jenis font (font-family) yang digunakan.
disabled » Mematikan fungsi dalam textarea
name » Nama textarea
readonly » Menentukan bahwa teks hanya untuk dibaca/read only

Attribute lain yang dapat digunakan

Standard Attributes » accesskey (character), class (class name), id, dir (ltr, rtl), lang (language_code), style (berisi property css dan nilainya - deklarasi css), tabindex (number), title (text), xml:lang (language_code)
Event Attributes » onblur, onchange, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup, onselect

Menentukan pengaturan textarea melalui tag style & attribute class

<style type="text/css">
textarea.gombal{
     width:400px;
     height:120px;
     padding:10px 5px 10px 20px;
     margin:20px 0;
}
</style>

<textarea class="gombal">Text here!</textarea>

Di bawah ini telah disertakan beberapa contoh kode berikut demo textarea yang melibatkan tag style, attribute style, attribute onclick dan attribute readonly. Edit kode dan dapatkan berbagai perubahan dengan memanfaatkan berbagai attribute ataupun properti css yang memungkinkan untuk digunakan dalam textarea.

Please click the button to display. Continue with editing code and click to see the results!


<!DOCTYPE html>
<html>
<title>html textarea tag</title>
<head>
<style type="text/css">
body{font:normal 90% Sans-serif;background:lightblue;}
#konten{margin:15px 5px;box-shadow:0 0 12px #888;background:#eee;border:1px solid #fff;border-radius:20px;padding:20px;}
h3{font:bold 18px Times New Roman;color:#000;}
</style>

</head>

<body>
<div id="konten">

<h3>Tanpa attribute style</h3>

<textarea rows="6" cols="50">
<script type="text/javascript">
function copyToClipBoard(sContents)
{
window.clipboardData.setData("Text", sContents);
alert("The contents have been copied to your clipboard.\t");
}
</script>
</textarea>


<h3>Menggunakan attribute style</h3>

<textarea rows="6" cols="50" style="padding:10px 5px 10px 20px;">
<script type="text/javascript">
function copyToClipBoard(sContents)
{
window.clipboardData.setData("Text", sContents);
alert("The contents have been copied to your clipboard.\t");
}
</script>
</textarea>

<h3>Menggunakan tag style</h3>

<style type="text/css">
textarea.gombal{
     height:120px;
     width:419px;
     padding:10px 5px 10px 20px;
     margin:20px 0;
     font:normal 14px Arial;
     color:#900;
     text-shadow:1px 1px 1px #ccc;
     line-height:20px;     
}
</style>


<textarea class="gombal">
<script type="text/javascript">
function copyToClipBoard(sContents)
{
window.clipboardData.setData("Text", sContents);
alert("The contents have been copied to your clipboard.\t");
}
</script>
</textarea>

<h3>Menggunakan tag style & attribute onclick</h3>

<textarea class="gombal" onclick="this.focus();this.select()">
<script type="text/javascript">
function copyToClipBoard(sContents)
{
window.clipboardData.setData("Text", sContents);
alert("The contents have been copied to your clipboard.\t");
}
</script>
</textarea>

<h3>Menggunakan tag style, attribute onclick & readonly</h3>

<textarea class="gombal" onclick="this.focus();this.select()" readonly>
<script type="text/javascript">
function copyToClipBoard(sContents)
{
window.clipboardData.setData("Text", sContents);
alert("The contents have been copied to your clipboard.\t");
}
</script>
</textarea>

</div>
</body>
</html>

Belajar Kode CSS & Desain Blog

Halaman

HTML textarea tag

Attribute lain yang dapat digunakan

Menentukan pengaturan textarea melalui tag style & attribute class

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('9.02.2012');

HTML textarea tag

Attribute lain yang dapat digunakan

Menentukan pengaturan textarea melalui tag style & attribute class

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e