Cara Membuat Teks Area (Text Area)

Posted by Aditzz at 11/08/2010 10:26:00 PM

Tanpa Basa Basi lagi mari kita praktek aja... langsung aja lihat contoh yang pertama dibawah ini, karena dalam pembuatan teks area nantinya akan saya bagi menjadi beberapa tingkatan yang mempunya functional tersendiri.. ni dia contohnya..

Pembuatan Text Area Standart / Default:

<textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>

Hasilnya akan nampak seperti dibawah ini

Keterangan :
rows = tinggi
cols = lebar

Pembuatan textarea dengan button / tombol higtlight

Untuk yang ini, adalah memudahkan pengunjung blog anda untuk memberi tanda hightlight

<center><form name="copy"><input value="Klik Tandai" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea></form></center>

Hasilnya akan nampak sperti dibawah ini.

Pembuatan teksarea dengan onclick hightligt

Untuk contoh yang ini hampir sama dengan textarea yang ada button hightlighnya, cuman bedanya yg tanpa menggunkan bantuan form.. nah untuk mencobanya silahkan anda klik pada halaman teksarea contoh hasil dibawah ini..

<textarea rows="5" cols="25" style="display: inline;" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>

Hasilnya akan nampak seperti dibawah ini..., anda klik aja di bagian teksareanya

pembuatan textarea sensitif hightlight

Untuk teks area yang ini fungsinya hampir sama dengan teks area yang barusan dicontohkan diatas ini, tapi lebih sensitif, maksudnya ketika mouse berada di wilayah teks area walaupun tanpa ngeklik tapi suda ter hightlight sendiri, ni dia contoh codenya..

<textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>

Hasilnya akan nampak dibawah ini, letakkan mouse anda di wilayah teks area dibawah ini agar menegetahui efek hightlight nya..

Oiya.. hampir lupa, kalo ingin merubah lebar dan tinggi tampilan textarea silahakn ganti angka angka pada kata " rows " dan " cols "

Nah contoh contoh diatas adalah sebagai contoh aja dan sebagai pembelajaran dan bisa anda kembangkan sendiri sesui dengan fungsional nya..
Moga aja membantu yah, n kalo masih bingung atau bahkan sudah berhasil membuat ini dan ingin koar koar disini juga silahkan.. monggo mas.. hehehe..
Sampai jumpai di tutorial tutorial yang menarik lainnya di http://aditya-sunajaya.blogspot.com/

0 Comments:

About Me

Saya adalah seorang yang sangat unik… Kenapa saya katakan sangat unik? Ya, karena hanya ada seorang Aditya Sunajaya di dunia ini. Maksudnya bukan namanya aja loh ya (kalo yang punya nama Aditya Sunajaya mah ada lebih dari 1…, hehe). Hal paling gampang untuk membuktikan bahwa saya adalah seorang yang unik adalah saya adalah satu-satunya orang di dunia ini yang memiliki sidik jari seperti yang saya miliki. Tidak percaya? Silakan cari satu orang saja yang memiliki sidik jari sama persis seperti yang saya miliki, dan buktikan bahwa saya salah… ;P Nah, sekarang apakah Anda juga adalah seorang yang unik? Betapa ajaibnya Pencipta saya dan Anda yang telah membuat keunikan di dalam diri masing-masing dari kita, dengan jumlah penduduk yang mencapai miliaran, dari masa ke masa, belum ditemukan ada dua orang berbeda yang memiliki sidik jari yang sama. (Berapa susahnya melakukan hal ini? Silakan hitung dengan teori probabilitas… :P ). Dan saya sungguh bersyukur sekali, jika saya ada saat ini sebagaimana saya adanya, itu semua hanya karena anugerah-Nya. :) [More..]
[aditzz.think.different@gmail.com]

Tips & Tricks Blogspot | Sambil Belajar & Hobby