Membuat Text Area yang Kreatif

Teks area merupakan salah satu fasilitas yang sering digunakan oleh para pembuat tutorial dalam meletakkan kode-kode bahasa pemrograman dalam blog/situsnya.

Ternyata banyak cara untuk membuat sebuah text area yang menarik dan kreatif. Disini akan saya share beberapa cara membuat text area. Semoga dapat bermanfaat bagi sobat semua :)

Text area standard :
<textarea>Teks sobat disini (ourreference.blogspot.com)</textarea>
Teks sobat disini (ourreference.blogspot.com)

Text area dengan mengatur jumlah kolom dan baris :
<textarea cols="25" rows="4">Teks sobat disini (ourreference.blogspot.com)</textarea>
Teks sobat disini (ourreference.blogspot.com)

Text area dengan border putus-putus :
<textarea cols="25" rows="4" style="border: 2px dashed;">Teks sobat disini (ourreference.blogspot.com)</textarea>
Teks sobat disini (ourreference.blogspot.com)

Text area dengan blok otomatis :
<textarea cols="25" rows="4" onclick="this.focus(); this.select();">Teks sobat disini (ourreference.blogspot.com)</textarea>
Teks sobat disini (ourreference.blogspot.com)

Text area dengan Tombol blok semua :
<div>
<form name="copy">
<div align="left">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Blok Semua" /> </div>
<div align="left">
</div>
<div align="left">
<textarea cols="55" name="txt" rows="100" style="height: 144px; width: 300px;" wrap="VIRTUAL">Teks sobat disini (ourreference.blogspot.com)</textarea></div>
</form>
</div>

Teks sobat disini (ourreference.blogspot.com)

Text area dengan kreatifitas :

<textarea cols="40" name="code" rows="3" style="-moz-border-radius: 10px; background: #BFFAFF; border-bottom: 4px solid #0000FF; border-left: 4px solid #FF0000; border-right: 4px solid #0000FF; border-top: 4px solid #FF0000; color: red; line-height: 1.5em; padding: 5px;"> Teks sobat disini (ourreference.blogspot.com)

<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;"> Teks sobat disini (ourreference.blogspot.com)

<textarea cols="40" name="code" rows="4" style="background: #00CCFF; border: 3px dotted #0000FF; color: #ffeff9; line-height: 1.5em; padding: 5px;"> Teks sobat disini (ourreference.blogspot.com)

<textarea cols="40" name="code" rows="6" style="-moz-border-radius: 7px 7px 7px 7px; background: #E6E6FF; border-color: #FF0000; border-style: solid; border-width: 1px 1px 1px 20px; color: red; line-height: 1.5em; padding: 5px;"> Teks sobat disini (ourreference.blogspot.com)

<br /><textarea cols="40" name="code" rows="6" style="background: #99FF33; color: black; line-height: 1.5em; padding: 5px;"><br /> Teks sobat disini (ourreference.blogspot.com)

Nah, itu tadi beberapa cara membuat text area. Yang manakah text area favorit sobat ? Apakah sobat memiliki text area versi lain yang lebih kreatif ? Yuk, mari kita sharing melalui form komentar dibawah ini :)

Regards,
Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: