Tutorial Form HTML Part 11: Fungsi dan Cara Penggunaan Tag Textarea Form HTML

Di panduan Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah menggunakan tag Textarea, namun pada panduan kali ini saya akan membahasnya dengan lebih pada.


Kegunaan Tag Textarea pada perancangan Form HTML

Objek form textarea digunakan bagi membangun text inputan yang dapat menampung lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun mempunyai kelebihan bagi menampung beberapa baris. Biasanya textarea digunakan bagi inputan yang panjang, seperti komentar, keterangan, atau catatan.

Bagi menggunakan textarea, kita lumayan membangun tag textarea selaku berikut:

Diantara tag pembuka dan penutup dapat diselipkan text yang akan ditampilkan selaku isian awal dari text area seperti berikut ini:


Atribut name: Bagi pemrosesan Tag Textarea

Walaupun tak mesti, namun apabila text area digunakan di pada form, karenanya atribut name berfungsi selaku identitas dari tag textarea tersebut. Identitas ini diperlukan di dikala pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di pada tag textarea:


Atribut cols dan rows: Menentukan Lebar dan Tinggi Textarea

Kedua atribut ini berfungsi bagi membatasi tampilan lebar kolom(cols) dan tinggi baris (rows) dari textarea. Nilai yang diinput yaitu jumlah karakter yang menjadi lebar dari text area. Misalkan kita membangun atribut cols=”40”, karenanya text area akan mempunyai lebar 40 karakter. Namun lebar ini tak akan persis sama dengan 40 karakter, karena akan tergantung font, serta jenis huruf yang diinput.

Contoh pemakaian atribut cols dan rows:


Atribut disabled dan readonly: menonaktifkan tag Textarea

Atribut disabled dan readonly digunakan bagi membangun textarea tak dapat digunakan. Pemakaian atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah textarea hanya dapat diisi ketika user telah mengisi kotak isian lainnya.

Kedua atribut ini hanya mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:

Walaupun kedua textarea yang mempunyai atribut ini tak dapat digunakan, namun keduanya akan mempunyai tampilan yang berbeda. Atribut disabled akan membangun kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasanya.

Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tak dapat digunakan.


Atribut id dan class: CSS dan Javascript

Selain atribut name, value, cols, rows, disabled dan readonly , kita pun dapat menggunakan atribut umum seperti id dan class pada tag textarea. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian Tag Textarea pada form HTML

Bagi merangkum seluruh contoh atribut dari tag textarea yang telah kita pelajari disini, saya akan membangun contoh cara penggunaannya di pada form HTML:

 Textarea kadang dibutuhkan bagi inputan form yang membutuhkan kalimat yang panjang seperti komentar.


Tutorial HTML tentang Fungsi dan Cara Penggunaan Tag Textarea ini menutup panduan singkat mengenai perancangan form HTML. Bila sahabat telah mempelajari dari part 1 hingga 11, karenanya sahabat setidaknya telah menguasai sebahagian besar tag dan atribut-atribut mengenai form HTML.


Sumber https://www.duniailkom.com/

Share

You may also like...