Jumat, 29 Januari 2010

Cara Membuat Textarea


Belajar HTML Dasar
Belajar HTML dasar
Textarea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan.

Dalam text area, penulisan kode HTML, CSS, atau script lain dapat ditulis tanpa perlu menggunakan entitas HTML atau dengan kata lain seluruh text, kode, dan script yang ditulis pada textarea akan tampil apa adanya setelah diposting.

Para blogger biasanya menggunakan textarea sebagai tempat untuk menyimpan kode HTML, CSS, atau script yang lain misalnya url download, script tukar link, script banner exchange, dan lain-lain. Berikut ini akan saya jelaskan cara membuat textarea pada blog jika suatu saat dibutuhkan untuk menempatkan atau menyimpan kode HTML. Cols berfungsi untuk mendefinisikan jumlah karakter ke samping yang akan ditampilkan pada textarea, Rows berfungsi untuk mendefinisikan jumlah baris pada textarea.

Contoh 1 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 :

Penulisan kode HTML :
<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea </textarea>

Tampilan setelah diposting :


Contoh 2 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 tetapi tulisan melebihi kapasitas textarea:

Penulisan kode HTML :
<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea dengan ukuran char width 30 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.</textarea>

Tampilan setelah diposting :



Contoh 3 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 dengan status readonly sehingga text yag berada di dalam textarea tidak bisa diedit setelah diposting.

Penulisan kode HTML :
<textarea cols="30" rows="4" readonly="readonly">Contoh penulisan text di dalam text area dengan status readonly, sehingga tulisan tidak bisa di-edit.</textarea>

Tampilan setelah diposting :



Contoh 4 : Penulisan kode html di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 dengan status text readonly untuk mencegah pengeditan setelah diposting:

Penulisan kode HTML :
<textarea cols="30" rows="4" readonly="readonly"> <a target="_blank" href="http://linksukses.com"> <img border="0" alt="Link Sukses" src="http://i278.photobucket.com/albums/kk82/yudispa/LinkSukses.jpg" title="Link Sukses"/>< /a> </textarea>

Tampilan setelah diposting :



Kode HTML pada contoh 4, jika tidak menggunakan textarea dapat juga ditulis dengan menggunakan entitas HTML seperti di bawah:

Penulisan kode HTML :
<p>&lt;a target=&quot;_blank&quot; href=&quot; http://linksukses.com&quot;&gt; &lt;img border=&quot;0&quot; alt=&quot; Link Sukses&quot; src=&quot; http://i278.photobucket.com/albums/kk82/yudispa/LinkSukses.jpg&quot; title=&quot; Link Sukses&quot;/&gt;&lt;/a&gt; </p>

Tampilan setelah diposting :
<a target="_blank" href = "http://linksukses.com"> <img border="0" alt="Link Sukses" src = "http://i278.photobucket.com/albums/kk82/yudispa/LinkSukses.jpg" title="Link Sukses"/></a>

Pada contoh 1 dan contoh 2, tulisan di dalam textarea masih bisa diedit, tetapi pada contoh berikutnya, tulisan di dalam textarea tidak bisa diedit (readonly).

Mohon koreksi teman-teman jika saya salah memberikan informasi mengenai textarea di atas. Semoga bermanfaat.

;

11 comments:

anorcampli     1 Maret 2010 13:37

Wow jadi begitu ya... membuat textarea...
thx ya om.....

naktajur     29 April 2010 15:52

thank's ini yang dicari biar gak bisa diedit tinggal nambahin readonly ya, thank's banyak ya,

kdrama     31 Mei 2010 16:26

tamu datang berkunjung sekalian blog walking. mantap tipsnya,
makasih om.

dani     4 Juli 2010 00:51

Kang Yuda,
ini benar Kang Yuda yang menulis kan? Saya tidak melihat nama penulis di konten ini. :)

Menurut saya, textarea+readonly sebaiknya memakai elemen pre. Sedangkan textarea untuk input saja.

azhir     18 Juli 2010 17:30

wah! Keren juga nie gan,
nti qw coba ah di blog gw

Anjees     6 Februari 2011 10:02

artikel yang baguus :)....,

molendotcom     10 Maret 2011 06:33

http://molendotcom.blogspot.com/

jasa penerjemah     20 April 2011 14:39

terimakasih sahabat,,,, saya coba tipsnya ternyata langsung berhasil sekali lagi terimakasih yaaaa

Riato     29 Juni 2011 23:12

Terima kasih infomnya....
Salam kenal.

goodboy75     6 Juli 2011 19:05

tipsnya...oke gan...!!!,

goodboy75     6 Juli 2011 19:07

intinya bisnis online ...ada disini teman2...tolongyah masuk kesini..!!!

Poskan Komentar

Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.

© Copyright
Anda tertarik dan bermaksud untuk menerbitkan/ mempublikasikan kembali artikel Link Sukses melalui website/ blog Anda? Silakan baca aturannya di Term of Use Link Sukses. Terima kasih telah berkunjung.


 Personal Blogs Better Blogging Blogs - Blog Catalog Blog Directory