Text area akan kelihatan semakin menarik jika memiliki latar belakang gambar dan diatasnya terdapat tombol Block All yang berfungsi untuk memblok semua tulisan yang berada di dalam text area. Berikut ini adalah kode text area dengan latar belakang bergambar dan tombol Block All
<form name="copy">
<div align="center">
<input onclick="javascript:
this.form.txt.focus();this.form.txt.select();" type="button" value="Block All" /></div>
<div style="text-align: center;">
<textarea name="txt" style="background-image: url("http://i1128.photobucket.com/albums/m486/syamsudin1/boy_365-x-100.gif"); background-repeat: no-repeat; height: 90px; padding: 5px; width: 360px;">
TULIS TEKS YANG AKAN DITAMPILKAN DISINI
</textarea></div>
</form>
Contoh tampilannya:
Keterangan :
a. <div align="center">
Kata center menunjukan bahwa posisi tombol akan berada di tengah, jika anda ingin posisi tombol berada di tepi sebelah kiri, maka anda ganti dengan kata left. Dan jika anda ingin posisi tombol berada di tepi sebelah kanan, tinggal ganti dengan kata right.
b. value="Block All"
Kata Block All adalah kata yang akan muncul di dalam tombol dan bisa anda ubah dengan kata yang anda inginkan.
c. http://i1128.photobucket.com/albums/m486/syamsudin1/boy_365-x-100.gif
Url gambar latar belakang text area dan bisa anda ganti dengan url gambar yang lain
d. height: 90px;
Angka 90 menunjukkan ukuran tinggi text area dan bisa anda ganti dengan ukuran yang lainnya
e. width: 360px;
Angka 360 menunjukkan ukuran tinggi text area dan bisa anda ganti dengan ukuran yang lainnya
Obrolan