Tuesday, March 8, 2011

Cara membuat text area

T
utorial kali ini saya akan membahas tetang cara membuat text area. Text area bisanya digunakan banyak orang untuk meletakan kode HTML Tukar link ataupun teks lain didalam sebuah area baru, selain itu juga teks area dapat dimanfaatkan agar dapat menghemat halaman posting supaya tidak terlalu panjang. Salah satu contoh dari teks area yang saya maksut seperti ini :

Texs area yang diatas sudah menggunakan fasilitas higtlight/Select All Dan masih ada jenis teks area yang lain seperti Teks area standar, Onclik higlight, Sensitif higtlight. teks area tersebut akan saya bahas satu persatu

Biar gk penasaran langusung saja kita bahas cara membuat teks area. Langkah-langkahnya adalah :
  1. Teks area standar

  2. KODE :

    <textarea rows="8" cols="30" style="display: inline;" name="txt">Isi teks atau kode HTML anda disini</textarea>

    HASIL :



  3. Teks area dengan tombol higlight

  4. KODE :

    <form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; cols:200px; rows:50px;" name="txt"> Isi teks atau kode HTML anda disini</textarea></p></form>


    HASIL :
  5. Teks area dengan model Onclik higlight

  6. KODE :

    <textarea rows="8" cols="20" style="display: inline;" name="txt" onclick="this.focus();this.select()">Isi teks atau kode HTML anda disini</textarea>


    HASIL:

  7.  Teks area dengan model Sensitif higtlight

  8. KODE :

    <textarea rows="8" cols="20" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks atau kode HTML anda disini</textarea>


    HASIL :


  9. KETERANGAN:

    • rows adalah tinggi dari kotak teks area, silah kan anda sesuaikan dengan kebutuhan anda
    • cols adalah lebar dari teks area, silahkan anda sesuaikan dengan kebutuhan anda
    • Isi teks atau kode HTML anda disini silahkan ganti dengan teks anda sendiri



<---- SELAMAT MENCOBA DAN TERIMAKASIH ---->


Artikel Terkait:

1 comment:

  1. ... artikel yg bagus sekali, gan !
    sangat bermanfaat dan mudah dimengerti !

    ReplyDelete