|
Get free daily email updates! |
Follow us! 
|
Tutorial blogger ini saya harapkan juga dapat memberikan informasi yang lebih kepada sahabat blogger semua. Text area yang saya posting pada versi sebelumnya adalah text area standar, banyak lagi teks area yang Anda dapat buat. Nah, dalam tutorial kali ini saya akan memberikan banyak variasi atau macam / jenis Text Area / Teks Area, Kotak bertukeran Link yang Anda dapat buat sendiri. Berikut adalah list-list-nya lengkap dengan kode-kode HTML-nya :
1. Tutorial Membuat Text Area dengan Tombol Highlight
Berikut adalah kode / code HTML untuk Text Area dengan Tombol Highlight
<center><form name="copy"><input value="Copy" 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 </textarea></form></center>
Nah, nanti hasilnya kurang lebih akan tampak seperti berikut :
2. Tutorial Membuat Text Area dengan Onclick Hightligt
Sebenarnya jenis teks area ini, adalah sedikit pengembangan dari Text Area Tombol Highlight. Bedanya : kalau pada Text Area dengan Tombol Highligt ada tombol untuk men-select seluruh isi teks/menyorot semua isi teks. Maka, pada Text Area dengan OnClick Highligt tidak ada tombol, hanya fungsi select isi teks area berjalan secara otomatis, hanya dengan meletakkan pointer mouse Anda di dalam text area tersebut.
Berikut adalah kode / code HTML-nya :
<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 </textarea>
Nah, untuk hasilnya maka akan tampak seperti yang ada di bawah ini :
3.Tutorial Membuat Text Area dengan Tombol Scroll Vertikal
Text area jenis juga merupakan bentuk modifikasi dari kotak teks area standar. Bedanya, cuman ada penambahan scroll vertikel. Kode / code HTML-nya adalah sebagai berikut :
<div style="border: 2px solid; color: #999999; height: 100px; overflow: auto; padding: 10px; text-align: justify; width: 470px;">
Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
</div>
Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
</div>
Untuk Hasilnya, maka akan tampak seperti berikut ini :
Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
5. Tutorial Membuat Text Area dengan Tombol Scroll Horizontal
Kembali lagi bahwa ini adalah modifikasi dari teks area yang sederhana, cuman ini ditambah dengan tombol scroll yang vertikel. Langsung saja, saya berikan kode / code HTML-nya. Langsung diaplikasikan saja sesuai dengan keinginan Anda. Kode HTML :
<div style="border: 1px solid; color: #999999; height: 40px; overflow-x: auto; overflow-y: hidden; padding: 10px; text-align: justify; width: 470px;">
<pre style="display: inline; margin-top: 0pt;">Isikan teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
</pre>
</div>
Maka hasilnya nanti, akan tampak seperti di b awah ini :
Tambahan suplemet pengetahuan /info blog :
Anda dapat memodifikasi kode-kode HTML diatas seperti :
border : digunakan untuk memodifikasi border / garis pinggir text area. Ubah 1px mejadi 2px, 3px, dst...
height : digunakan untuk mengubah tinggi yang diinginkan, ubah sesuai kebutuhan dan keinginan Anda
width : digunakan untuk mengubah lebar dari text area yang Anda buat
Untuk memasukkan kode HTML dalam text area, maka Anda harus mem-parse dulu kode HTML yang ingin Anda masukkan dalam Teks Area / Text Area
Okey, itulah mungkin yang dapat saya share pada kesempatan ini. Semoga artikel ini dapat bermanfaat
Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.
Artikel 
1 Comments
