Buat memudahkan kita semua dalam memahami "text area", berikut ini adalah kode dasar/standar dari text area . . .
hasilnya akan seperti ini:
Contoh diatas adalah text area yang dibuat dengan kode/script standar. Sebenernya ada beberapa jenis text area yang bisa dibuat, tapi gw coba buat sharing 4 jenis "text area" yang biasa digunain dalam proses blogging.
1. Text Area yang kolom dan barisnya bisa diatur
Kode:
<div align="center">
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
hasilnya:
2. Text Area dengan satu klik maka seluruh isi akan di blok
Kode:
<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
Hasilnya:
3. Text Area dengan tambahan select all button
Kode:
<div align="center">
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>
Hasilnya:
4. Text Area yang jika disorot mouse akan di blok semua
Kode:
<div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>
Hasilnya:
Keempat jenis text area di atas adalah yang umum dipergunakan dalam proses blogging. Sebenernya masih ada jenis lainnya, yaitu Text Area dengan border
Kode:
<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Tulis apa aja deh.. terserah !!</textarea></div>
Hasilnya:
Text area border ini jarang gw temuin di blognya temen-temen blogger lain. Mungkin karena tampilannya rada beda, jadi engga banyak yang mau ngegunainnya.
Gw kira sharing kali ini cukup . . . Semoga bermanfaat buat kita semua !! Amiiinnn !!
Tidak ada komentar:
Posting Komentar