Science Of Fools
Image by Aries ELavo -

Minggu, 01 Januari 2012


Cara Membuat Text Area Berbagai Versi
Biasanya text area di gunakan untuk menyimpan kode-kode Html/Javascript ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="5" cols="20" readonly> 
Hii siapa aja yang baca jangan lupa follow dan comment di blog aq ea.. Science Of fools OK
</textarea></p>

Keterangan :
rows="6", menunjukan tinggi dari text area.
Cols="20", menunjukan lebar dari text area.

Hasilnya akan seperti di bawah ini :

Text Area dengan memakai HighLight /Select


Highlight atau Select All,yaitu dimana saat kita tekan tombol Select All,maka kode dalam text area akan otomatis terblok semua.


Untuk kodenya,copy paste di bawah ini :

<div>
<form name="Select All code">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly>
Hii siapa aja yang baca jangan lupa follow dan comment di blog aq ea.. Science Of fools OK
</textarea></p>
</div>
<p align="left" style="margin-top: 0; margin-bottom: 0">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">

Contoh hasilnya :




Yang berperan penting untuk highlightnya sebenarnya hanya pada kode

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

Jadi, Jangan sampai dirubah ya :)
Text Area Select Otomatis
Anda pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.
Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.

Untuk contohnya lihat di bawah ini :


Untuk kodenya kopi paste di bawah ini :

<div>
<form name="PujiantoroStyle">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" cols="55" onmouseover="this.form.txt.select()" readonly ;>
Hii siapa aja yang baca jangan lupa follow dan comment di blog aq ea.. Science Of fools OK</textarea></p>
</form></div>


Adapula beberapa keterangan dan tambahan untuk membuat text area semakin menarik.
width : lebar text area
height : tinggi text area
background-color : warna backgroung text area
background-repeat : pengulangan tampilan pada gambar
background-position : letak background gambar
background-image : background gambar
text-align : perataan tulisan
padding : jarak antar tulisan dengan border
border : garis atau bingkai text area
solid : warna garis atau bingkai text area
font-size : ukuran huruf
font-family : jenis huruf
color : warna huruf

Selamat mencoba :)

Baca Juga Text Area Dengan Style yang beda 

Tidak ada komentar:

Posting Komentar