Cara Membuat Text Area

Biar nggak kepanjangan, langsung aja ke cara membuat Text Area.

Copy paste code dibawah :

<p align="left"><textarea name="code" rows="5" cols="25">
Letakkan disini teks yang akan di tampilkan dalam text area
</textarea></p>

Contoh, saya mau tampilkan link blog ini :

<p align="left"><textarea name="code" rows="5" cols="25">
<ul><li><a href="http://abufath.blogspot.com/">Abu Fath</a></li>
<li><a href="http://alhaudh.blogspot.com/">Al Haudh</a></li></ul>
</textarea></p>

Hasilnya seperti di bawah :

<ul><li><a href="http://abufath.blogspot.com/">Abu Fath</a></li><li><a href="http://alhaudh.blogspot.com/">Al Haudh</a></li></ul>

Keterangan :

=> "left" menunjukkan posisi text area berada di sebelah kiri, Sobat bisa mengantinya dengan center atau right untuk posisi di tengan atau kanan.

=> rows="5", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka "5" tadi dengan angka yang lebih tinggi nilainya.

=>Cols="25", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 25 " tadi dengan angka yang lebih tinggi nilainya.

Ada variasi untuk membuat Text Area yaitu dengan memakai HighLight

Variasi ini dimaksud untuk memudahkan memblok semua teks/kode-kode yang ada dalam text area, dengan sekali klik pada tombol highlight maka semua teks/kode-kode dalam text area akan terblok sehingga tidak akan ada yang tertinggal. Hal ini akan memudahkan pengunjung untuk meng-copy teks yang ada dalam text area. Untuk membuat text area dengan menggunakan highlight ini silahkan anda 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: 250px; HEIGHT: 120px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letakkan disini teks yang akan di tampilkan dalam text area</textarea></p></div></form>


Sebagai contoh :

<div><form name="copy"><div align="left"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="left"></div><p align="left"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">
<ul><li><a href="http://abufath.blogspot.com/">Abu Fath</a></li>
<li><a href="http://alhaudh.blogspot.com/">Al Haudh</a></li></ul>
</textarea></p></div></form>

Hasilnya seperti ini :

<ul><li><a href="http://abufath.blogspot.com/">Abu Fath</a></li><li><a href="http://alhaudh.blogspot.com/">Al Haudh</a></li></ul>

Keterangan :

=> left menunjukan bahwa posisi tombol berada di kiri, jika Sobat ingin posisi tombol berada tengah, tinggal ganti dengan kata center. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

=> <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 (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

=> Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :
=>"left" ini menunjukan bahwa text area akan berada di left, jika Sobat ingin text area anda berada di tepi kiri atau kanan, ganti kata left dengan kata center atau right

=> "WIDTH:250px" menunjukan lebar dari text area tersebut sebanyak 250 pixel, Sobat bisa menggantinya sesuai keinginan. misal: "WIDTH:500px;"

=>HEIGHT: 120px --> angka "120px" menunjukan bahwa text area akan mempunyai tinggi sebesar 120 px, Sobat bisa menggantinya, misal : HEIGHT:150px.

Nah, mudahkan...

Semoga berhasil.