Cara Membuat Text Area dengan Fasilitas Select All

Posted by Herman on Monday, January 12, 2009 12 comments

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


Kotak ini biasa digunakan untuk menyimpan kode, teks atau link untuk dicopy oleh pengunjung. Nah bagi anda yang ingin mencobanya caranya sangat mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Keterangan:
Teks yang dicetak merah merupakan teks yang muncul pada kotak. Silahkan ganti dengan teks atau kode yang ingin anda tampilkan.
center menunjukkan posisi kotak ditengah. Jika anda ingin meletakkan dikiri maka ganti dengan left atau right jika anda ingin meletak disebelah kanan
width merupakan lebar kotak dan height merupakan tinggi kotak. Silahkan diganti sesuai kebutuhan.


Membuat kotak teks/text area dengan fasilitas Select All
Tadi kita sudah membahas tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all.

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

Nah agar lebih jelas silahkan anda klik tombol Select All yang ada dibawah ini


Ok uda jelaskan. Pingin mencobanya? Klu iya silahkan ikuti petunjuk dibawah ini

Untuk membuat text area dengan tombol Select All berada diatas seperti dibawah ini.

Tambahkan kode ini ke blog anda

<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>

Jika anda ingin membuat text area dengan tombol Select All berada dibawah seperti contoh dibawah ini


Maka gunakan kode 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>

Keterangan:
- Teks yang dicetak tebal merupakan nama tombol. Anda bisa menggantinya dengan nama lain.
- Teks berwarna merah adalah teks muncul didalam kotak. Silahkan diganti dengan teks atau kode anda.

Selamat mencoba..


Recent Posts:

12 comments

Austin said... 19 July, 2009
om log ditambah COpy gimana scripnya :D
Narui Salleh said... 13 August, 2009
terima kasih dengan tipsnya
Donny said... 23 November, 2009
thanks infonya ......
Blog Mas Kristo said... 14 December, 2009
thanks tipnya bagus banget...
sugeng tigefa said... 18 August, 2011
salam blogging dan salam kenal

nah ini yang tak cari, thanx gan atas sharenya
Fitz Freedom said... 14 December, 2011
Pamit Bos mao Reply....thk's.
Sodikin MS said... 06 January, 2012
terima kasih kawan, langsung dipraktekkan di http://pak-sodikin.blogspot.com
kirana's blog said... 21 March, 2012
nice info gan,,sngt membantu sekali infonya,,ane sering mmpir ke blog ini.tukeran link gan,,mksh slm kenal
i-net9 said... 17 October, 2012
thnks gan atas infonya,,saya berhasil mempraktekkannya,,,
ricoademandana said... 08 November, 2012
sudah saya pergunakan di blog saya bang, sangat membantu bang
hhehe
Rizqi zimah h said... 29 November, 2012
terimakasih sudah membantu,,,:))
aztasacka said... 04 February, 2013
wah makasih infonya yah, jangan lupa berkunjung balik ke blog ane...!!!!!
;)

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment