Bagaimana Cara Membuat Text Area?

Kali ini kita akan belajar tentang bagaimana membuat text area pada blog. Namun sebelum masuk ke tutorial, sebaiknya kita perlu tau dulu apa maksud dari istilah Text Area? Bagi yang sudah malang melintang menekuni dunia blogging tentu nama Text Area sudah bukan barang baru lagi. Namun berbeda jika yang membaca ini adalah temen-temen pemula. Untuk itu mari kita diskusikan ini sebentar.
Ada yang bisa menjelaskan deskripsi Text Area? Saya sendiri juga bingung bagaimana menyusun kalimat yang tepat untuk menjelaskan deskripsi Text Area ini, biar mudah mungkin sebaiknya kalian lihat contohnya dulu dibawah ini :

Tulisan ini adalah contoh Text ARea
Nah, setelah melihat contoh diatas bagaimana sekarang mendeskripsikannya? Mungkin kurang sedikit lebih seperti ini: Text area adalah suatu kotak area yang dibuat untuk membatasi teks yang dipilih dengan teks lainya karena maksud tertentu (versi ngawur).
Dengan contoh dan juga penjelasan singkat diatas setidaknya sekarang kalian sudah sedikit paham apa yang dimaksud Text Area.
Lalu apa tujuan seseorang membuat Text Area?
Jika dalam aktifitas blogging Text Area biasanya dibuat bersama artikel didalamnya memuat kode-kode web tertentu yang disajikan ke pembaca agar si-pembaca mudah untuk meng-copy kode tesebut. Misalnya saja kode script, HTML, jQuery, atau lainnya.
Saya rasa penjelasan mengenai Text Area cukup sampai disini, sekarang kita akan belajar bagaimana membuat Text Area di blog.

Ada beberapa variasi Text Area yang bisa dibuat, nanti kita akan membahas itu satu demi satu. Namun sebelum itu kita harus tau terlebih dulu kode dasar yang digunakan untuk membuat-nya, seperti ini :

<textarea> Teks disini  </textarea>

Dan dibawah ini sudah saya siapkan beberapa contoh variasi Text Area yang bisa kita buat di blog  :

1. Text Area biasa atau sederhana saja

Contoh Kode :

<textarea>Ini adalah contoh Text Area biasa</textarea>

Hasilnya :

Ini adalah contoh Text Area Biasa

2. Text Area dengan mengatur tinggi lebar area

Con toh kode :

<textarea cols="50" rows="2">Ini adalah contoh Text Area dengan mengatur tinggi lebar area</textarea>

Hasilnya :

Ini adalah contoh Text Area dengan menagtur tinggi lebar area

3. Text Area dengan mengatur jenis dan warna border

Contoh kode :

<textarea cols="50" rows="2" style="border: 2px dashed red;">Ini adalah contoh Text Area dengan mengatur jenis dan warna border</textarea>

Hasilnya :

Ini adalah contoh Text Area dengan mengatur jenis dan warna border

4. Text Area dengan mengatur warna background

Contoh kode :

<textarea cols="50" rows="2" style="background: yellow;">Ini adalah contoh Text Area dengan mengatur warna background</textarea>

Hasilnya :

Ini adalah contoh Text Area dengan mengatur warna background

5. Text Area dengan klik auto block

Contoh kode :

<textarea cols="50" onclick="this.focus(); this.select();" rows="2">Ini adalah contoh Text Area dengan klik auto block (klik pada area untuk block semua isi)</textarea>

Hasilnya :

Ini adalah contoh Text Area dengan klik auto block (klik pada area untuk block semua isi)

6. Text Area dengan sentuh auto block

Contoh kode :

<textarea onclick="this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" readonly="readonly" rows="2" style="height: 50px; padding: 3px; width: 430px;">Ini adalah contoh Text Area dengan sentuh auto block (arahkan kursor pada area untuk block semua isi)</textarea>

Hasilnya :

Ini adalah contoh Text Area dengan sentuh auto block (arahkan kursor pada area untuk block semua isi)

7. Text Area dengan tombol Highlight All

Contoh kode :

<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">
<textarea cols="50" name="txt" rows="2" style="height: 60px; width: 430px;" wrap="VIRTUAL">Ini adalah contoh Text Area dengan tombol Highlight All (klik pada tombol "Highlight All" diatas untuk block semua isi)</textarea></div>
</form>
</div>

Hasilnya :

Ini adalah contoh Text Area dengan tombol Highlight All (klik pada tombol "Highlight All" diatas untuk block semua isi)

Setelah mengetahui macam-macam jenis serta kode untuk membuat Text Area, sekarang kalian tentu sudah bisa mempraktekkannya diblog sendiri. Kita bisa membuat Text Area tersebut dihalaman posting, sidebar, footer atau di elemen manapun asalkan ada opsi untuk penulisan kode HTML disitu. Semoga senang dengan tulisan diatas.

Ceritakan ini di :

Facebook Google+ Twitter Digg

Tentang Penulis :

Ansory Esce
Dia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+