Cara Mudah Membuat Text Area dengan Kode HTML

Text area adalah sebuah kolom yang dibuat sebagai kontainer yang berisi, tulisan, gambar atau kode html yang ingin kita tampilkan kepada para pengunjung blog. Selain sebagai kontainer text biasa, text area juga bisa dibuat dengan fungsi highlight agar memudahkan pengunjung melakukan copy keseluruhan isi text area.

Langsung saja kita mempelajari bagaimana cara membuat text area dengan kode HTML.

Membuat Text Area Biasa

Untuk membuat text area biasa, silahkan copy paste saja kode di bawah ini :

<p align="center"><textarea name="mytextarea" rows="5" cols="40" readonly=""> ISI DENGAN KONTEN YANG DIINGINKAN </textarea></p>

Ada 2 (dua) parameter yang perlu diperhatikan pada kode HTML diatas. Parameter yang pertama adalah cols, yang berarti jumlah karakter yang ditampilkan per baris. Ini lebih menunjukkan lebar dari text area. Jika menginginkan text area yang lebar, maka silahkan ganti angka "40" dengan angka yang lebih tinggi nilainya.

Parameter yang kedua adalah rows yang berarti jumlah baris yang akan ditampilkan oleh text area. Ini lebih menunjukkan tinggi dari text area. Jika jumlah baris yang diketik lebih panjang dari ukuran kontainer yang ditentukan, maka text area akan menampilkan scrolling.

Hasil dari kode HTML diatas akan terlihat seperti di bawah ini :

ISI DENGAN KONTEN YANG DIINGINKAN

Membuat Text Area dengan Tombol Highlight

Text area juga ada yang dilengkapi dengan fungsi highlight, di mana fungsi ini akan menyorot semua text yang berada di dalam kontainer tanpa terlewati. Text area ini paling cocok digunakan untuk sharing informasi yang materi atau isinya banyak, dan ini akan mengurangi resiko tertinggalnya satu text ataupun kode-kode untuk di copy. Sekali klik, seluruh text ataupun informasi yang kita sharing di kontainer akan langsung tersorot dan bisa langsung dicopy oleh pengunjung blog.

Lebih menarik bukan? Untuk membuat text area dengan menggunakan highlight ini, silahkan copy kode HTML di bawah :

<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><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 120px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu pengunjung melihat keseluruhan teks</textarea></p></div></form>

Kode di atas mempunyai dua elemen fungsi, yaitu elemen yang membuat fungsi highlight dan elemen yang membuat fungsi text area. Agar anda lebih memahami kode di atas, berikut penjelasan kedua elemen ini.

Elemen tombol highlight All :

1. <div align="center"> --> Center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika menginginkan posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right;
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> Kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (disorot atau diblok), jadi jangan merubah kode ini;
3. Value="Highlight All" --> Highlight All adalah kata yang akan muncul di dalam tombol, Jadi jika ingin merubah tulisan ini, silahkan ganti dengan kata-kata yang diinginkan. Contoh : Copy Semua.

Element text area :

1. <p align="center"> --> Menunjukan bahwa text area akan berada di tengah. Jika menginginkan text area berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right
2. <text style="WIDTH: 200px"> --> WIDTH menunjukan lebar dari text area tersebut sebanyak 200 pixel Jadi jika ingin memperpendek atau memperpanjang lebar text area, silakan ganti dengan angka yang diinginkan. Misal : "WIDTH: 700px;"
3. HEIGHT: 120px --> HEIGHT menunjukan tinggi dari text area. Angka "120px" menunjukan bahwa text area memiliki tinggi sebesar 120 pixel. Jadi jika ingin merubahnya, silakan ganti angka tersebut dengan angka yang diinginkan. Misal : “HEIGHT: 160px;”.

Hasil dari kode HTML diatas akan terlihat seperti di bawah ini

Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu pengunjung melihat keseluruhan teks

Ternyata text area sangat mudah dan gampang di modifikasi. Jadi silahkan diedit text area ini sesuai dengan kebutuhan Anda.

Semoga bermanfaat.