Belajar HTML Part 27 Cara Membuat Textarea di Form HTML

Posted on Posted in Tutorial HTML

Jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat select Box di form HTML, nah dalam tutorial kali ini akan membahas mengenai cara membuat textarea di form HTML, baik langsung saja pembahasannya sebagai berikut.

Textarea itu hampir sama dengan inputan berjenis text, yang membuatnya berbeda adalah textarea dapat digunakan untuk menginputkan text lebih dari 1 baris, sederhananya dengan menggunakan textarea anda dapat membuat inputan yang lebih banyak menampung text, biasanya textarea ini digunakan untuk membuat inputan berupa keterangan, alamat, catatan dll

agar tidak bingung kita langsung coba buat contoh penggunaan textarea di HTML :

semisal saya beri nama tag_textarea.html, lalu saya buka di browser :

maka terlihat terdapat satu textarea, gimana mudah kan, baik setelah itu saya akan jelaskan skrip apa yang telah kita buat :

  • <textarea></textarea> adalah tag yang digunakan untuk membuat textarea, berbeda dengan tag <input> yang tidak memiliki tag penutup, untuk tag <textarea> memiliki tag penutup </textarea>
  • untuk name hampir diseluruh inputan memiliki attribute ini, digunakan untuk memberikan nama pada bagian textarea yang anda buat
  • attribute rows digunakan untuk mengatur baris yang dibuat,tertulis rows=”10″ artinya terdapat 10 baris pada textarea yang anda buat
  • attribute cols digunakan untuk  mengatur kolom yang dibuat, tertulis cols=”30″ artinya terdapat 30 kolom pada textarea yang anda buat

 

Attribute disabled dan readonly

kedua attribute ini bisa anda gunakan pada bagian tag textarea, jadi tidak hanya disabled yang hampir dimiliki oleh seluruh inputan, tapi anda juga dapat menggunakan attribute readonly,

anda pasti tidak lupa kan fungsi readonly dan disabled :

  • Dengan attribute readonly user hanya bisa melihat isi dari textarea tanpa bisa mengedit ataupun menghapus dari isi textarea, tetapi masih dapat mengcopy isi dari textarea
  • Attribute disabled hampir sama dengan readonly tapi yang membedakan, textarea akan menjadi disabled, artinya tidak bisa diklik sama sekali, sehingga user juga tidak bisa mengcopy isi dari textarea

contoh dari penggunaan skrip adalah seperti berikut ini :

ini adalah contoh ketika anda menggunakan attribute disabled

ini adalah contoh ketika anda menggunakan attribute readonly

bagaimana mudah kan ?

 

Attribute id dan class

sama seperti inputan yang lain, textarea juga bisa anda berikan attribute id dan class, untuk menipulasi set style CSS ataupun manipulasi dengan Javascript, contoh adalah sebagai berikut :

 

Bagaimana mudah kan ?? dengan menggunakan textarea anda dapat membuat inputan text yang jauh lebih panjang, baik sekian dulu tutorial pembahasan mengenai textarea di dalam form HTML, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial berikutnya…
 

Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box

Leave a Reply

Your email address will not be published. Required fields are marked *