Cara Membuat Text Area dengan Tombol Select All

Untuk beberapa orang mungkin istilah Text Area masih dirasa asing (seperti saya ini yang baru tahu. hehehe..). Kalau kita jalan-jalan di web dan blog, terutama blog yang memberikan tutorial HTML, dsb ada kotak yang memuat kode-kode HTML. Jadi Text Area ini digunakan untuk menampilkan kode-kode HTML atau kode lainnya (bahasa kerennya script) dalam bentuk text. Biasanya kalau kita langsung mengetikkan kode HTML tanpa adanya text area, kode tersebut akan diterjemahkan oleh browser dan ditampilkan hasilnya, padahal mungkin sebenarnya kita ingin menampilkan kode mentahan HTMLnya. Tapi text area gak cuma dibuat menampilkan kode HTML lho. Kita juga bisa memuat tulisan pada text area. Seperti apakah text area itu? Mari kta lihat contoh text area :

Contoh Text Area

itulah yang dinamakan Text Area. Cara membuatnya sangat mudah. Silakan mengcopy kode berikut

<p align="center"><textarea name="code" rows="2" cols="15"> Ketik yang ingin ditampilkan di sini </textarea></p>

Hasilnya menjadi :

Ketik yang ingin ditampilkan di sini

Selain itu, Text Area juga dapat dilengkapi dengan Tombol yang dengan otomatis memblok semua tulisan yang terdapat dalam text area. Caranya dengan kode berikut :

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All" type="button"> </span></div><p align="center"><textarea style="width: 200px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="50" readonly="">ganti tulisan ini dengan yang ingin ditampilkan dalam text area</textarea></p></form></div>

Hasilnya Menjadi :

ganti tulisan ini dengan yang ingin ditampilkan dalam text area

Keterangan :

1. div align="center" yang pertama menunjukkan posisi tombol, bisa diubah menjadi right untuk posisi tombol di kanan atau left untuk posisi tombol di kiri.
2. input onclick="javascript:this.form.txt.focus();this.form.txt.select();" adalah kode yang memuat perintah block all. Jadi untuk amannya tulisan ini tidak perlu diubah-ubah.
3. Yang diblok hijau (value="Select All") adalah nama tombolnya, bisa diganti sesuai selera masing-masing
4. div align="center" yang kedua menunjukkan posisi kotak textarea, yang sama seperti yg pertama dapat diubah ke kanan atau ke kiri.
5. style="height: 80 px width: 200px;" adalah tinggi dan lebar kotak textarea, bisa diubah sesuai selera (height = tinggi; width = lebar)Kalau isi di dalam textarea lebih besar daripada kotaknya, akan muncul scroll secara otomatis
6. readonly="" adalah kode untuk mengunci agar tulisan dalam textarea tidak dapat diubah. Kode ini penting terutama untuk textarea berisi kode script agar pembaca tidak dapat dengan tidak sengaja mengubah isi dalam kotak textarea. Tapi tenang saja kalau isi kotak sudah di-copy dan di-paste di tempat lain, kode tersebut bisa diubah. Coba deh bedakan sendiri dengan textarea yang standard di atas yang tidak memakai script ini. Sudah tahu kan bedanya?