Cara Bikin Textarea Beserta Kelebihan dan Kekurangannya

Tipsslide - Masih membahas tips dan trik seputar blogging. Kali ini saya akan berbagi cara membuat textarea untuk blog beserta kelebihan dan kekurangannya. Sebetulnya topik ini sudah terlalu banyak ditampilkan di blog-blog lain yang mengangkat tema tentang blogging. Namun tidak ada salahnya kali ini saya mencoba membagikannya kembali untuk sobat semua disertai dengan penjelasannya.

Secara umum Textarea adalah sebuah widget yang berfungsi untuk menampilkan barisan teks/kalimat/kode dalam sebuah bingkai dengan ukuran yang bisa disesuaikan, tanpa mengurangi jumlah kata sesungguhnya maupun fungsinya. Dengan kata lain, penggunaan Textarea dapat meminimalisir deretan teks yang panjang pada sebuah postingan menjadi lebih singkat. Kegunaan lainnya adalah mempermudah sebuah deretan teks/kalimat/kode untuk disalin oleh pembaca. Contoh penggunaannya biasanya dapat ditemukan pada postingan yang membawakan topik seputar kumpulan kode HTML atau pada kolom tukar link di sidebar.

Secara umum susunan kode HTML Textarea adalah sebagai berikut :

<textarea rows='3' cols='30'>TEKS/KODE ANDA DI SINI</textarea>

keterangan :
Kode rows='3' , artinya textarea memuat hingga 3 baris.
Kode cols='30', artinya textarea memuat hingga 30 kolom.

Hasilnya :
TEKS/KODE ANDA DI SINI

Dari struktur dasar tersebut, Anda bisa mengembangkannya dengan menambahkan beberapa style agar textarea terlihat lebih bagus.

Textarea Background Warna

Kode :
<textarea style='background:#00bb00;color:#fff;' cols='30' rows='3'>MASUKKAN TEKS/KODE DI SINI</textarea>

Textarea Dengan Border

Kode :
<textarea style='border:2px solid #00bb00;' cols='30' rows='3'>MASUKKAN TEKS/KODE DI SINI</textarea>

Textarea Dengan Border dan Background

Kode :
<textarea style='background:#00bb00;border:4px solid #ccdd00;color:#fff;' cols='30' rows='3'>MASUKKAN TEKS/KODE DI SINI</textarea>

Membuat Highlight Untuk Textarea
Fungsi utama dari highlight ini adalah untuk mempermudah pembaca saat akan menyalin seluruh teks yang terdapat di dalam textarea tanpa takut tertinggal satu hurufpun, dan pastinya dengan sekali klik.

Kode :

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 200px; height: 100px;" name="txt" rows="5" wrap="VIRTUAL" cols="30">MASUKKAN TEKS/KODE/TULISAN YANG INGIN ANDA SHARE DI SINI</textarea></p></form></div>

Hasilnya :

MASUKKAN TEKS/KODE/TULISAN YANG INGIN ANDA SHARE DI SINI

Keterangan kode :

<div align="center">
Kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika Anda ingin mengubah posisi tombol berada di tepi sebelah kiri, ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, 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 dalam textarea akan di highligt (di tandai atau di blok), jadi jangan ubah kode ini.

Value="Highlight All"
Kata Highlight All adalah kata yang akan muncul di dalam tombol highlight, Anda dapat mengganti kata tersebut sesuai keinginan.
Contoh :
Value ="Salin Teks" dsb.

<p align="center">
Kode ini menunjukan bahwa text area akan berada di tengah, seperti kode pada poin pertama tadi. Anda bisa mengubah posisinya sesuai keinginan. Jika ingin text area sobat berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.

<text style="WIDTH: 200px">
Kode "WIDTH:200px" menunjukan lebar dari text area tersebut sebanyak 200 pixel, jadi jika Anda ingin mengecilkan atau memperlebar text area, Anda tinggal menggantinya dengan angka yang diinginkan. misal:"WIDTH:400px;"

HEIGHT: 100px
Angka "100px" menunjukan bahwa text area akan mempunyai tinggi sebesar 100 px. Jadi jika Anda ingin merubah panjang dari atas ke bawah, tinggal ganti angka tersebut dengan angka yang Anda inginkan. Misal : HEIGHT:250px.

Kelebihan :

• Dapat menyingkat teks yang panjang.
• Terlihat lebih rapi.
• Mempermudah pembaca menyalin informasi teks.

Kekurangan :
Saya rasa tidak ada kekurangan dari Textarea ini, mengingat keberadaannya tidak wajib ada secara teknis. Dengan kata lain textarea digunakan karena memang kita yang membutuhkan fungsinya.

Semoga Bermanfaat...

Share this post