Sunday, 27 April 2014

Cara Membuat Text Area dengan Tombol Select All

Cara Membuat Text Area dengan Tombol Select All
Image by alfianCMX
Cara Membuat Text Area dengan Tombol Select All - Teks area adalah sebuah kotak persegi yang digunakan untuk memuat kode scrpit HTML. Dimana kotak tersebut digunakan untuk tempat menyimpan atau menampilkan kode" HTML dalam bentuk text. 
Dan dipembahasan kali ini saya akan memberikan tutorial Cara Membuat Text Area dengan Tombol Select All. Ini merupakan modifikasi dari text area itu sendiri dimana ditambahkan tombol Select All. tentunya agar mempermudah pengunjung untuk mendapatkan kode HTML tanpa susah" memblok kodenya kebawah.
Dibawah ini saya akan berikan gambaran asli dari text area, dan gambaran text area dengan menggunakan tombol Select All. Sobat juga dapat memodifikasi sesuai keinginan sobat. Oke disimak baik-baik ya

  • Kode dasar text area 

Kotak diatas merupakan dasar dari text area , untuk membuat kotak seperti itu sangatlah mudah sobat , copy paste kode dibawah ini lalu letakkan di HTML disamping Compose : <textarea cols="27" rows="1" Belajar membuat Text Area :) </textarea> Keterangan : Rubah cols , rows dan "Belajar membuat Text Area :)" sesuai yang kalian inginkan.
  • Kode text area dengan tombol Select All



Nah kalo kotak diatas merupakan modifikasi dari text area, disini sana menambahkan tombol Select All dan juga background pada kotak text area.Copy paste kode dibawah ini kemudian letakkan di HTML disamping Compose :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /><div align="center"><textarea cols="55" readonly="name="txt" rows="100" style="background: #1b1b1d; color: white; height: 60px; width: 400px;" wrap="VIRTUAL">Ketik teks/kode html yang anda inginkan :)</textarea></div></form></div>

  • Keterangan :

[<div align="center">]
Kode diatas merupakan kode agar kotak text area menjadi center (rata tengah) , sobat bisa merubahnya menjadi rata kiri atau juga rata kanan.
[<input onclick="javascript:this.form.txt.focus();this.form.txt.select();"]
Kode diatas merupakan kode yang memuat perintah block all. Jadi agar tidak terjadi eror , kode ini tidak usah dirubah-rubah.
[type="button" value="Select All" />]
Yang diblok merah merupakan nama dari tombolnya, dan dapat diganti sesuai keinginan anda masing-masing.
[readonly="]
Kode diatas berfungsi sebagai pengunci tulisan yang berada ditextarea agar tidak dapat dirubah. Kode ini cukup penting,terutama untuk text area yang berisi script agar pembaca tidak dapat mengubah isi didalam kotak textarea.
[style="background: #1b1b1d; color: white; height: 60px; width: 400px;"]
Kode diatas merupakan kode untuk merubah background , tinggi dan lebar kotak textarea, sobat bisa merubahnya sesuai selera. Jika tulisan yang berada didalam kotak text area banyak, maka akan muncul scroll secara otomatis. Dan jika sobat menginginkan background berwarna putih hapus saja kode background: #1b1b1d;
[Ketik teks/kode html yang anda inginkan :)]
Merupakan isi dari kotak pada text area , silakan ganti dengan kebutuhan sobat dan jika tulisan yang berada didalam kotak text area banyak, maka akan muncul scroll secara otomatis.
Baca juga MENGATASI TOMBOL BALAS/REPLY YANG TIDAK BERFUNGSI
Warna-warni banget ya postinganku kali ini ?hahahaa :P. Gimana sobat mudah sekali kan ? jika sobat ingin bereksperimen silakan klik link ini http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea. Oke sobat sekian yang bisa saya share tentang Cara Membuat Text Area dengan Tombol Select All. Tunggu update-update selanjutnya yang pastinya semakin bermanfaat untuk anda. Selamat mencoba :)

Bagikan

Jangan lewatkan

Cara Membuat Text Area dengan Tombol Select All
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.

5 komentar

Tulis komentar
avatar
27 April 2014 at 22:18

bagus nih tutorialnya mantap banget,izin nyobain yamas

Reply
avatar
27 April 2014 at 22:26

silakan gan , makasih ya kunjungan baliknya :)

Reply
avatar
28 April 2014 at 07:36

Cakep ya, jadi lebih berwarnaaaa :D

Reply
avatar
28 April 2014 at 12:34

hahaa iya mbak , makasih kunjungannya ;)

Reply
avatar
27 February 2015 at 09:01

Manteeep brrrooo informasinya :)
Kunjungi juga web kami
http://grosiracemaxstasik.com/
http://apotekherbalkita.com/
http://pengobatanalamimustajab.com/

Reply