Cara Membuat Text Area Serta Jenis Dan Pengembangannya (modifikasi)

TextArea adalah sebuah tempat atau area, yang biasanya di gunakan untuk menampilkan text,kode Html serta kode javascript dalam sebuah area baru pada sidebar atau postingan yang di maksudkan agar para pengunjung mudah mengcopy isi didalam textarea tersebut.Dan adapun jenis serta cara pembuatanya adalah:

Contoh : Modifikasi text area image

1. Textarea A

Cara pembuatan untuk text area seperti diatas adalah copy kode dibawah ini dan paste kan pada tempat dimana anda ingin menampilkanya.

<textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda ingin tampilkan di sini </textarea>

Keterangan :
rows adalah menunjukan tinggi dari textarea
cols adalah menunjukan lebar dari textarea

2. Textarea B

Cara pembuatan untuk textarea seperti diatas adalah copy kode dibawah ini dan paste kan pada tempat dimana anda ingin menampilkanya.

<form ><input onclick="javascript:this.form.Bptxt.focus();this.form.Bptxt.select();" type="button" value="Highlight All"><br> <textarea name="Bptxt" rows="6" cols="20">simpan tulisan anda di sini</textarea></form>

Keterangan :
<form> artinya kode untuk mendukung pembuatan texarea serta tombol Higliht All pada text area diatas

kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok).
Value="Highlight All"adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

3. Texarea C

Cara pembuatan untuk textarea seperti diatas adalah copy kode dibawah ini dan paste kan pada tempat dimana anda ingin menampilkanya.

<textarea rows="6" cols="20" onclick="this.focus(); this.select();">Tulis text ataupun kode-kode yang anda ingin tampilkan di sini</textarea>

Keterangan
onclick="this.focus(); this.select();kode ini artinya ketika anda mengarahkan kursor mouse anda kedalam texarea dan mengkliknya seluruh isi dari textarea akan di blok atau ditandai sehingga memudahkan untuk mengcopy isi dari textarea tersebut.

4.Texarea D

Cara pembuatan untuk textarea seperti diatas adalah copy kode dibawah ini dan paste kan pada tempat dimana anda ingin menampilkanya.

<textarea name="Bptxt" rows="6" cols="20" style="background:white; color:black;border-left: 20px solid red; line-height: 1.5em; padding: 5px;-webkit-box-shadow: 5px 5px 8px #818181;

-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px; ">Tulis text ataupun kode-kode yang anda ingin tampilkan di sini </textarea>

Keterangan :
Texarea diatas merupakan pengembangan/modifikasi dari texarea A yang mengunakan fungsi css dan css3 dengan features border-radius property (untuk saat ini css3 akan berfungsi pada firefox dan beberapa browser lainya tapi sayangnya belum pada Internet Explorer)
-moz-border-radius-topleft: 15px; artinya membentuk border bentuk bulat pada bagian atas kiri textarea
-moz-border-radius-bottomright: 15px; artinya membentuk border bentuk bulat pada bagian kanan bawah text area

5.Texarea E

Cara pembuatan untuk textarea seperti diatas adalah copy kode dibawah ini dan paste kan pada tempat dimana anda ingin menampilkanya.

<div>
<form>
<div align="center" style="margin: 20px;">
<input onclick="javascript:this.form.Bptxt.focus();this.form.Bptxt.select();" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 9px; -moz-border-radius-bottomright: 9px; -moz-border-radius-topleft: 9px; -moz-border-radius-topright: 9px; background: white none repeat scroll 0% 0%; border: 4px solid red; color: red; line-height: 1.5em; padding: 5px;" type="button" value="Highlight All" />
</div>
<div align="center">

<textarea cols="20" name="Bptxt" rows="6" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: white none repeat scroll 0% 0%; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">simpan tulisan anda di sini</textarea>
</div>
</form>
</div>

Keterangan:
Texarea ini merupakan pengembangan dari textarea B yang mengunakan fungsi css dan css3 dengan features border-radius property pada bagian tombol highlight all dan textarea
-webkit-box-shadow: artinya memberikan bayangan pada bagian image atau border yang diberikan feature kode css3 pada bagian cssnya

6.Texarea F

Cara pembuatan untuk textarea seperti diatas adalah copy kode dibawah ini dan paste kan pada tempat dimana anda ingin menampilkanya.

<textarea name="Bptxt" rows="6" cols="20" style="background:white; color:black;border-left: 20px solid red; line-height: 1.5em; padding: 5px;-webkit-box-shadow: 5px 5px 8px #818181;-moz-box-shadow: 5px 0px 8px #818181;-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px;line-height:150%;-moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft:15px; "onclick="this.focus(); this.select();">Tulis text ataupun kode-kode yang anda ingin tampilkan di sini </textarea>

Keterangan:
Texarea ini merupakan pengembangan dari textarea C yang mengunakan fungsi css dan css3 dengan features border-radius property pada bagian textarea

Sekain dulu bahasan tentang textarea semoga berhasil dan bermanpaat terimakasih...

Jika Anda Menyukai Artkel Seperti Di atas,Link back ke artikel ini dengan mengcopy salah satu kode di bawah ini