Tuesday, August 26, 2008

Membuat Text Area

Posted by dav On 8:38 PM
Text Area adalah suatu halaman HTML yang dibuat dengan tidak menganggap / membaca code atau script yang ada didalamnya, hal ini sering digunakan para blogger untuk menyediakan link sebagai sarana bertukar link yang bergambar. Dengan tidak dianggap/dibacanya code/script didalam text area maka kita dengan mudah menulis artikel-artikel yang berupa code/script tanpa mempengaruhi halaman HTML atau tanpa mengalami perubahan pada kode/script pada saat dibuka oleh browser. Untuk membuat Text Area ikuti langkah berikutnya.

Contoh text area :

Inilah kode yang kita tuliskan untuk membuat text area seperti contoh diatas:
<textarea name="contoh" cols="45" rows="6" wrap="virtual" id="contoh">
Disinilah teks/code/script yang akan kita tulis dan akan berada didalam text area
</textarea>
Coding Text Area :
  • <textarea> : tag untuk memulai text area
  • name="contoh" : untuk memudahkan dalam mengelola halaman HTML jika kita menggunakan lebih dari 1 text area
  • cols="45" : untuk menentukan banyaknya (lebar/horizontal) kolom yang akan kita gunakan, nilai 45 bisa kita ubah disesuaikan dengan kebutuhan
  • rows="6" : untuk menentukan banyaknya (tinggi/vertikal) baris yang akan kita gunakan nilai 6 bisa kita ubah disesuaikan dengan kebutuhan
  • wrap="virtual" : tag ini bisa saja kita masukan bisa kita buang, jika kita buang maka secara otomatis teks yang ada didalam text area akan menyesuaikan dengan panjang dan lebar Text Area.
  • wrap="off" : Wrap dimatikan, jika kita set Off maka teks tidak akan dipotong/disesuaikan dengan lebar Text Area tetapi lebar teks akan diikuti text area dengan memunculkan scrollbar horizontal
  • id="contoh" : ini digunakan sebagai identitas yang unik, tag id digunakan jika text area yang kita gunakan dalam halaman HTML lebih dari 1
  • </textarea> : tag untuk menutup text area
Mudah-mudahan teman-teman blogger mengerti dengan maksud tutorial ini. Jika sudah memahaminya mari kita lanjutkan bahasan text area dengan beberapa penambahan fasilitas lainnya. Berikut adalah text area yang ditambah dengan tombol seleksi atau sering di sebut Highlight.

Contoh text area dengan tombol Seleksi :






Inilah kode yang kita tuliskan untuk membuat text area dengan tombol seleksi seperti contoh diatas :
<form name="highlight">
<div align="center">
<textarea name="contoh" cols="45" rows="6" wrap="virtual" id="contoh">
Disinilah teks/code/script yang akan kita tulis dan akan berada didalam text area
</textarea>
<br/>
<input onclick="javascript:this.form.contoh.focus();this.form.contoh.select();" type="button" value="Seleksi">
</div>
</form>
Coding JavaScript :
  • <form name="highlight"> : Nama form JavaScript, ini sebagai identitas code/script form supaya tidak terjadi bentrok dengan form lain jika kita membuat lebih dari 1 form dalam halaman HTML
  • <div align="center"> : Tag div align sebenarnya bukan tag JavaScript tetapi tag umum HTML yang digunakan untuk menempat suatu objek; center = tengah, left = kiri, dan right = kanan.
  • input onclick : Script yang digunakan untuk memberikan reaksi pada saat kita mengklik mouse pada tombol
  • javascript:this.form.contoh.focus(); : Mengarahkan klik tombol ke isi text area contoh
  • this.form.contoh.select(); : untuk menyeleksi isi text area contoh
  • type="button" : Jenis tampilan tombol
  • value="Seleksi" : Nama tombol, gantilah sesuai keinginan anda
Semoga berhasil dengan lancar. Salam hangat dari Banjarsari - Ciamis - Jawa Barat