Cara Membuat Text Area beserta Variasinya

Text Area merupakan suatu area yang berbentuk kotak, yang apabila sobat masukkan beberapa kata/kalimat dan melebihi kapasitas dari kotak tersebut, kotak tersebut memilikki fungsi scroll agar meminimalisasi supaya teks tidak memakan tempat. Text Area juga sangat berguna untuk peng-copy pastean teks karena beberapa website mematikan fungsi copy-pastean atau fungsi klik kanannya sehingga sobat tidak bisa melakukan Copy Paste.

Pada kesempatan ini ghifar akan memberikan tiga variasi dari text area yang bisa sobat pilih.

A. Text Area Sederhana

<textarea rows="6" cols="35">isi dengan kalimat, kata, kode yang diinginkan</textarea>

Dengan kode di atas maka text area tersebut memilikki jumlah baris 6 dan lebar form text area 35. Sobat bisa ubah kembali jumlah baris dan lebar form text area tersebut sesuai dengan kebutuhan sobat. Jadinya akan seperti ini.

diisi dengan kalimat, kata, kode yang diinginkan

B. Text Area dengan fungsi Copy All / Select all

<div>

<form name="copy">

<div align="center">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>

<div align="center">

</div>

<div align="center">

<textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">Berikut ini adalah cara membuat teks area dengan fungsi copy all / select all atau cara klik copy all</textarea></div>

</form>

</div>

Kode di atas merupakan kode untuk membuat fungsi Copy All / Select All. Jadinya seperti ini.

Berikut ini adalah cara membuat teks area dengan copy / select all atau cara klik copy all

• Untuk tulisan yang berwarna Biru ganti dengan nama perintah yang sobat suka. Misalnya ganti dengan perintah Select All, Tambahkan, dll.

• Untuk tulisan yang berwarna Merah ganti dengan kalimat, kata, kode yang diinginkan.

C. Text Area dengan fungsi Scroll

<div style="overflow:auto; width:80%px; height:50px; padding:10px; border:2px solid #f4f4f4; background-color:#f2f2f2"> 

Cara membuat text area dengan fungsi scroll / tombol gulir

</div>

Jadinya akan seperti ini.

Cara membuat text area dengan fungsi scroll / tombol gulir

Sobat tinggal rubah ukuran, kode warna, dan teks yang akan sobat tampilkan sesuai kebutuhan.

Cara memasukkan kode HTML ini dengan mengklik tombol HTML pada saat sobat menulis artikel (Bukan Edit HTML untuk Template ya!!!).

Demikian Cara Membuat Text Area beserta Variasinya. Bagaimana? Sobat bisa memilih diantara ketiga Text Area tersebut. Silahkan dicoba.

Posted in: Tutorial Blog