Text Area atau Area Teks merupakan tempat atau area berbentuk persegi yang digunakan untuk menyimpan suatu tulisan atau teks dan membentuk area tersendiri. Biasanya text area ini dipakai untuk menyimpan kode-kode HTML serta teks-teks yang lainnya agar dapat di-copy oleh para pengunjung blog dengan mudah. Ada 2 macam text area yang akan kita bahas, yaitu text area dengan tombol highlight, satu lagi text area auto block.
Untuk membuat text area dengan tombol highlight, silakan copy kode di bawah ini.
<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>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 150px; width: 350px;" wrap="VIRTUAL">
Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.
</textarea></div>
</form>
</div>
Kode di atas mempunyai 2 elemen bagian. Elemen yang pertama adalah elemen kode pembentuk tombol yang bertuliskan Highlight All. Sedangkan elemen yang kedua adalah elemen kode pembentuk text area.
Keterangan untuk elemen pembentuk tombol bertuliskan Highlight All:
- <div align="center">, kata center menunjukkan bahwa posisi tombol berada di tengah. Bila Anda ingin posisi tombol itu berada di sebelah kanan, ganti kata center dengan right. Jika ingin berada di sisi kiri, Anda ganti kata center dengan kata left.
- input onclick="javascript:this.form.txt.focus();this.form.txt.select();", kode ini menunjukkan kalau tombol Highlight All diklik maka seluruh teks yang ada di dalam text area akan ter-highlight.
- value="Highlight All", kata Highlight All adalah kata yang muncul di tombol. Anda dapat menggantinya dengan kata keinginan Anda.
Keterangan untuk elemen pembentuk text area:
- <div align="center">, menunjukkan text area berada di tengah. Jika Anda ingin text area berada di kiri, ganti kata center dengan left. Sedangkan bila Anda ingin di kanan, ganti kata center dengan right.
- width: 350px;, menunjukkan lebar dari text area sebesar 350 piksel. Jika ingin lebih lebar lagi silakan diganti angka 350 dengan angka yang lebih tinggi lagi nilainya.
- height: 150px;, menunjukkan tinggi dari text area. Bila ingin lebih tinggi lagi, silakan ganti angka 150 dengan dengan yang lebih tinggi lagi nilainya.
Bila kode text area dengan tombol highlight di atas diletakkan di Edit HTML, maka hasilnya akan seperti ini.
Nah yang kedua text area auto block. Maksudnya, jika kita mengarahkan mouse pointer ke daerah text area, maka teksnya akan ter-block atau ter-highlight secara otomatis tanpa perlu mengkliknya. Untuk membuat text area seperti itu, kita perlu menambahkan kode onmouseover="this.form.txt.select()" readonly="readonly" sehingga secara keseluruhan kode untuk membuat text area akan menjadi seperti di bawah ini.
<div align="center">
<form name="gayamunadi">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 40px; width: 350px;">Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.
</textarea></form>
</div>
- div align="center" menunjukkan posisi text area berada di tengah. Kalau ingin berada di kiri, center diganti dengan left, bila mau di kanan, center diubah menjadi right.
- width: 350px; menunjukkan lebar text area sebesar 350 piksel. Bila ingin yang lebih lebar lagi, silakan ganti angka 350 dengan nilai yang lebih tinggi atau sebaliknya.
- height: 40px; menunjukkan tinggi bidang text area sebesar 40 piksel. Jika ingin yang lebih tinggi lagi, ubah angka 40 dengan nilai yang lebih besar.
hasilnya akan seperti dibawah ini
selamat mencoba.
