Membuat Text Area dengan Berbagai Variasi

 

Artikel kali ini membahas tentang Membuat Text Area dengan Berbagai Variasi. Biasanya dipakai untuk menyisipkan kata-kata atau kode yang panjang sehingga menghemat space postingan. Untuk memakai text area ini anda harus menggunakan Mode HTML, bukan Compose. Berikut adalah cara membuat text area.

A. Cara membuat Text area sederhana :

Copy kode dibawah ini.

<textarea rows="5" cols="35">Isi dengan kalimat atau kode anda</textarea>

Nih, contoh yang sudah jadi :

Isi dengan kalimat atau kode anda
Catatan :
- Rows adalah jumlah baris atau tinggi text area, angka berwarna merah bisa anda ganti sesuka anda.
- Cols adalah lebar text area, angka yang berwarna biru bisa anda ganti sesuka anda.
- Huruf berwarna hijau, anda bisa ganti dengan kalimat atau kode anda sendiri.

B. Cara membuat Text area dengan tombol untuk meng-copy semua kalimat/kode didalamnya :

Copy kode dibawah ini.

<div>
<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="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL">Isi dengan kalimat atau kode anda</textarea></div>
</form>
</div>

Nih, contoh yang sudah jadi :

Isi dengan kalimat atau kode anda

Catatan :

- Center adalah letak tombol copy dan text area, bisa anda ganti sesuka anda (left,center,right)

- Highlight All adalah perintah untuk meng-copy seluruh text didalam text area, bisa anda ganti sesuka anda.

- Height adalah tinggi text area, angka yang berwarna merah bisa anda ganti sesuka anda.

- Width adalah lebar text area, angka yang berwarna biru bisa anda ganti sesuka anda.

- Huruf berwarna hijau, anda bisa ganti dengan kalimat atau kode anda sendiri.

C. Cara membuat Text area dengan scroll :

Copy kode dibawah ini.

<div style="border: 2px solid #000000; height: 80px; margin-left: 30px; overflow: auto;padding: 3px; text-align: justify; width: 300px;">Isi dengan kalimat atau kode anda</div>

Nih, contoh yang sudah jadi :

Isi dengan kalimat atau kode anda

Catatan :
- Angka yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area, bisa anda ganti sesuka anda.
- Huruf yang berwarna merah adalah kode warna, bisa anda ganti sesuka anda. Untuk kode warna bisa anda lihat disini
- Huruf yang berwarna oranye bisa anda ganti sesuka anda(left,right,center,justify)
- Huruf yang berwarna hijau bisa anda ganti dengan kalimat atau kode anda sendiri.