Membuat Text Area Pada Blog (Tutorial)

Text Area adalah suatu area atau tempat yang biasa digunakan untuk menyimpan suatu text atau kode HTML tertentu. Text area ini biasanya di tujukan ke pada pengunjung blog untuk lebih mudah mencopy atau menyalin data. Text Area ini bisa kita simpan di dalam postingan maupun di dalam widget HTML. 

Untuk memudahkan anda memahami Text Area, berikut adalah kode dasar atau standar untuk membuat text area:

 <textarea>isi dari teks area</textarea>

Hasilnya nanti akan seperti ini:

 



Text Area Biasa

Scriptnya :   

<div align="center"> <textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! </textarea></div>

Hasilnya :




Text Area terblok semua dengan sekali klik

Scriptnya :
<div align="center"> <textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
Hasilnya :



Text Area Dengan Tombol Highlight

Scriptnya :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu anda membaca keseluruhan teks</textarea></p></div></form>
Hasilnya seperti ini :



Cara Membuat Text Area terblok Semua saat Disorot Mouse

Scriptnya :
<div> <form name="Septian Lesmana"> <div align="center" style="margin-bottom: 0pt; margin-top: 0pt;"> <textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div> </form> </div>

Hasil Script di atas :




Cara Membuat Text Area Dengan Border

Scriptnya :
<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Tulis apa aja deh.. terserah !!</textarea></div>
Hasilnya :






Satu lagi Anda bisa menambahkan kode readonly="" jika ingin text area yang anda buat tidak bisa dihapus

Script :
<div align="center"> <textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">Coba klik text area ini kemudian hapus, hasilnya nihil. Coba hapus text arae di atas pasti terhapus.</textarea></div>

 Maka text area dari script di atas tidak bisa dihapus, contoh:
 


Salam Sahabat,

Komentar

Postingan populer dari blog ini

Membuat Aplikasi Kalkulator Sederhana di Android dengan Android Studio: Panduan dan Penjelasan

Program C++ Toko Kue (IF BERSARANG)

Psylution: Innovation and Solutions for Mental Health in Indonesia