News Update :

Rabu, 20 Februari 2013

Cara membuat kotak teks/text area dengan fasilitas Select All

Print Friendly and PDF
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,Contoh seperti di bawah ini:
Jika anda ingin membuat text area dengan tombol Select All berada diatas seperti contoh diatas ini maka kode nya seperti di bawah 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>
Maka akan menjadi seperti ini:

Jika anda Select All ingin berada di bawah Maka kode nya seperti di bawah 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>
Comments
0 Comments

Tidak ada komentar:

Posting Komentar

 

© Copyright The Tutorial Blogger 2013 -2014 | Design by Onedra | Published by Templates | Powered by Blogger.com.

Pesan Admin :Selamat Datang Bro ≧◉◡◉≦ <div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div><div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div>