Script text area dengan fasilitas select all

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat kotak yang contohnya seperti dibawah ini :

Kotak ini biasa digunakan untuk mengisi kode-kode pada postingan maupun untuk membuat kotak link exchange.
Bagi anda yang ingin mencobanya caranya sangat mudah , anda cukup copy kode dibawah ini lalu letakkan ke blog anda , letaknya bebas terserah anda dimana saja.
<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-text-area-dengan-fasilitas.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
Keterangan :
Tulisan yang dicetak merah merupakan teks yang muncul pada kotak , silahkan ganti dengan teks atau kode anda.
center menunjukkan posisi kotak di tengah , jika anda ingin meletakkannya di sebelah kiri maka ganti dengan kata left atau jika anda ingin meletakkannya di sebelah kanan maka ganti dengan kata right.
width: 300px merupakan lebar kotak dan height: 50px merupakan tinggi kotak , silahkan ganti sesuai keinginan anda.

Membuat kotak teks/text area dengan fasilitas Select All

Tadi kita sudah membahas tentang cara membuat text area.
Sekarang kita akan membahas tentang kelanjutannya yaitu membuat teks area dengan fasilitas Select All.

Tombol select all adalah sebuah tombol yang digunakan untuk meng hightlight seluruh teks yang berada di dalam text area sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area tersebut.

Agar lebih jelas silahkan anda klik tombol Select All yang ada dibawah ini :
Untuk membuat teks area dengan posisi tombol Select All berada di atas , silahkan copy kode dibawah ini :
<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></p></form>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-text-area-dengan-fasilitas.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
Catatan :
Anda bisa mengganti tulisan warna merah dengan teks sesuai keinginan anda.
Kode warna biru adalah ukuran dari kotak , bisa anda ganti sesuai keinginan anda.
Untuk membuat teks area dengan posisi tombol Select All berada di bawah seperti pada gambar di atas , silahkan copy kode dibawah ini :
<form name="copy"><div style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div><p align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></p></form>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-text-area-dengan-fasilitas.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
Catatan :
Anda bisa mengganti tulisan warna merah dengan teks sesuai keinginan anda.
Kode warna biru adalah ukuran dari kotak , bisa anda ganti sesuai keinginan anda.

Untuk membuat teks area dengan background warna seperti pada gambar diatas , silahkan copy kode dibawah ini :
<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="background-color: #e0e0e0;-moz-border-radius: 5px;border-radius: 5px; border: 1px solid #4169E1; padding: 3px; width: 460px; height: 200px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></p></form>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-text-area-dengan-fasilitas.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

Catatan :
Anda bisa mengganti tulisan warna merah dengan teks sesuai keinginan anda.
Kode warna biru adalah ukuran kotak dan warna latar kotak , bisa anda ganti sesuai keinginan anda.

Membuat kotak teks/text area dengan Blok Otomatis
Untuk membuat teks area dengan Blok Otomatis seperti pada gambar di atas , silahkan copy kode dibawah ini :
<div>
<form name="kompi ajaib">
<p align="center" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 200; height: 50" name="txt" rows="3" cols="45" onmouseover="this.form.txt.select()" readonly ;>Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></p>
</div>

Catatan :
Anda bisa mengganti tulisan warna merah dan biru sesuai keinginan anda.

Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge