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 :
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="proses.php" method="get">
<p>Alamat</p>
<p><textarea name="alamat" rows="10" cols="30"></textarea>
</p>
<input type='submit' name='tombol' value='kirim' />
</form>
</body>
</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
| 1 | <textarea name="alamat1" rows="10" cols="30" disabled="disabled"></textarea> |
ini adalah contoh ketika anda menggunakan attribute readonly
| 1 | <textarea name="alamat2" rows="10" cols="30" readonly="readonly"></textarea> |
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 :
| 1 | <textarea name="alamat1" rows="10" cols="30" id='abc' class='def'></textarea> |
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…