04/04/2012

Membuat Text Area Sederhana


AksFullShare-Kali ini saya ingin berbagi tentang cara membuat text area dengan HTML, meskipun sederhana, saya mencoba mengabadikan ilmu ini agar tidak terlupakan dan bisa bermanfaat buat yang belum tahu mengenai info ini.... berikut langkah membuat Text area sederhana...

1. Teks Area Pertama

Adalah teks area yang paling simpel  alias sederhana...

Berikut Kodenya :
<textarea>Masukkan Kode/Tulisan Yang Anda Inginkan</textarea>

Hasilnya Akan Seperti Ini :



2. Teks Area Ke-dua

Adalah Teks area yang bisa kita atur Panjang dan Lebarnya..

Berikut Kodenya :

<textarea cols="25" rows="4">Masukkan Kode/Tulisan Yang Anda Inginkan</textarea>

Hasilnya Akan Seperti Ini :


3. Teks Area Ke-Tiga

Adalah Teks Area yang garisnya terputus-putus

Berikut Kodenya :

<textarea cols="25" rows="4" style="border: 2px dashed ;">Masukkan Kode/Tulisan Yang Anda Inginkan</textarea>

Hasilnya Akan Seperti Ini :


4. Teks Area Ke-Empat

Adalah Teks area auto block, artinya jika teks kita klik akan otomatis ke blok semua.

Berikut Kodenya :

<textarea cols="25" rows="4" onclick="this.focus(); this.select();">Masukkan Kode/Tulisan Yang Anda Inginkan</textarea>

Hasilnya Akan Seperti Ini :


5. Teks Area Ke-Lima

Adalah Teks area dengan Tombol select all di atas dan di bawah

Berikut Kode Select all di Atas :

<div><formname="copy"><div align="center"><inputonclick="javascript:this.form.txt.focus();this.form.txt.select();"type="button" value="Select All"> </div><divalign="center"></div><p align="center"><textareastyle="widht: 300px; height: 144px" name="txt" rows="100"wrap="virtual" cols="55">Masukkan Kode/Tulisan Yang Anda Inginkan</textarea></p></div></form>

Hasilnya Akan Seperti Ini :


Berikut Kode Select all di Bawah :

<form name="copy"><div style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Masukkan Kode/Tulisan Yang Anda Inginkan</textarea></div><p align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></p></form>

Hasilnya Akan Seperti Ini :


Keterangan :

Width  : Lebar
Height : Tinggi
Cols     : kolom
Rows   : Baris
Border : Garis


Semoga Bermanfaat Buat Anda juga....

No comments:

Post a Comment

Ingat !!! Jangan Hanya Bisa Berkomentar, Berikanlah Solusi Dari Komentar Anda. Thanks