Cara Membuat Teks Area dan Variasi Text Area

Pada kesempatan ini saya akan memberikan 3 variasi teks area. yaitu text area sederhana / default, text area dengan fungsi select / copy all, dan text area dengan tombol scroll / gulir.

Cara memasang teks area ini adalah pada saat menulis postingan pilih menu HTML (bukan edit HTML template loh yaah). Lihat gambar. 

1. Teks area sederhana

<textarea rows="6" cols="35">diisi dengan kalimat, kata, kode yang diinginkan</textarea>

dengan kode di atas maka tampilan teks area seperti di bawah ini. angka 6 berarti jumlah baris, 35 menunjukkan lebar form teks area.









diisi dengan kalimat, kata, kode yang diinginkan

2. Teks Area dengan Select copy all 

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">Berikut ini adalah cara membuat teks area dengan copy / select all atau cara klik copy all</textarea></div>
</form>
</div>

Kode diatas adalah cara membuat dengan text area dengan perintah / fungsi select / copy all

silakan sobat atur letaknya center artinya posisi text area ditengah, height > tinggi nya, width > lebar form teksnya.

Berikut ini adalah cara membuat teks area dengan copy / select all atau cara klik copy all

3. Membuat Teks area dengan Tombol scroll

<div style="overflow:auto; width:80%px; height:50px; padding:10px; border:2px solid #f4f4f4; background-color:#f2f2f2">

Cara membuat text area dengan fungsi scroll / tombol gulir

</div>

Beginilah tampilannya jika menggunakan kode diatas, silakan sesuaika background color dengan template sobat masing-masing. Intinya kode merah adalah silakan modifikasi sendiri.

Cara membuat text area dengan fungsi scroll / tombol gulir