Textarea adalah elemen form untuk masukan berupa multi-line text. Jika pada input text kita hanya bisa memasukkan baris dalam satu baris saja, maka pada textarea kita bisa memasukkan text dalam beberapa baris. Textarea bisa menampung jumlah karakter yang tak terbatas dan biasanya text ditampilkan dalam font yang fix-width seperti Courier.
Salah satu kelebihan dari textarea yang tidak dimiliki oleh elemen form yang lain adalah sifatnya yang sizeable, artinya bisa diubah-ubah ukurannya oleh pengguna. Meski demikian, ukuran textarea juga bisa diset saat form load dengan atribut cols dan rows. Ukuran textarea juga bisa diset melalui css.
Cara membuat textarea pada form
Pada form html, textarea dibuat dengan menggunakan tag <textarea> dengan tag penutup </textarea. Jika ingin mengisikan data pada textarea bisa ditaruh diantara tag <textarea> dan </textarea>.
Untuk melakukan pengaturan terharap textarea ada beberapa atribut yang bisa dipakai, diantaranya :
1.name
Merupakan atribut untuk mendefinisikan nama dari textarea. Atribut name ini berupa text.
contoh:
<textarea name=”komentar”></textarea>
2.autofocus
Digunakan untuk menetapkan focus pada textarea saat pertama kali form di load. Atribut ini bernilai boolean dan untuk menggunakan atribut ini cukup ditulis nama atribut saja tanpa value.
contoh:
<textarea autofocus></textarea>
3.cols
Digunakan untuk menetapkan lebar sebuah textarea saat diload. Atribut ini bernilai angka (integer).
contoh:
<textarea cols=”50″></textarea>
4.rows
Digunakan
untuk menetapkan tinggi sebuah textarea saat diload. Atribut ini bernilai angka (integer).
contoh:
<textarea rows=”50″></textarea>
5.disabled
Digunakan untuk membuat textarea dalam kondisi tidak bisa dipakai, artinya text area tidak dapat diedit dan diselect. Atribut ini bernilai boolean dan untuk menggunakan atribut ini cukup ditulis nama atribut saja tanpa value.
contoh:
<textarea disabled></textarea>
6.maxlength
Merupakan atribut untuk membatasi jumlah karakter dalam textarea. Ini digunakan untuk membatasi jumlah dari textarea yang tak terbatas yang bisa menyebabkan error saat proses submit form.
contoh:
<textarea maxlength=”50″></textarea>
7.placeholder
Berfungsi memberikan petunjuk terhadap pengisian textarea. Petunjuk ini akan tampil saat textarea kosong dan akan menghilang saat textarea diisi atau focus.
contoh:
<textarea
placeholder=”Silahkan isi komentar disini…”></textarea>
8.readonly
Digunakan untuk membuat tulisan pada textarea hanya bisa dibaca saja. Atribut ini berbeda dari disabled, karena isi dari textarea masih bisa diselect, dicopy dan disubmit. Atribut ini bernilai boolean dan untuk menggunakan atribut ini cukup ditulis nama atribut saja tanpa value.
contoh:
<textarea readonly></textarea>
9.required
Merupakan atribut untuk
membuat kondisi textarea harus diisi saat form disubmit. Atribut ini bernilai boolean dan untuk menggunakan atribut ini cukup ditulis nama atribut saja tanpa value.
contoh:
<textarea required></textarea>
10.wrap
Atribut ini menentukan bagaimana textarea dikemas saat proses submit form.
contoh:
<textarea rows=”2″ cols=”20″ wrap=”hard”>
Penggunaan textarea
Textarea biasanya digunakan untuk masukan multi-line text seperti saat memasukkan komentar pada suatu blog. Contoh lain adalah saat melakukan posting artikel pada blog juga menggunakan textarea. Jika hanya menggunakan satu baris text sebaiknya digunakan input text bukan textarea.
Menentukan text awal pada textarea
Saat form load kita bisa menampilkan text awal pada textarea dengan cara menaruh text tersebut diantara tag <textarea> dan </textarea>. Teks ini bisa panjang tak terbatas. Text awal ini juga menjadi nilai balikan textarea saat form disubmit.
Mengambil nilai dari textarea
Cara mengambil nilai dari textarea mengacu pada nama textarea dan menggunakan variabel super global sesuai metode form yang dipilih. Untuk menampilkan text dengan karakter enter (baris baru) harus digunakan fungsi nl2br(). Jika tidak maka text akan ditampilkan urut secara horiszontal tanpa baris baru, meski pada textarea ditulis baris baru.
Contoh penggunaan textarea pada PHP
Membuat textarea pada form
Silahkan isi komentar:<br/><form action="" method="post">
<textarea rows="5" cols="50" name="komentar"></textarea><br/>
<input type="submit" name="enter" value="Enter">
</form>
Tampilan form diatas pada browser
Silahkan isi komentar:
Membuat script untuk menangani textarea
<?phpif(isset($_POST['enter']))
{
if(empty($_POST['komentar']))
{
echo "Anda belum mengisi komentar!";
}
else echo "Komentar anda: <br/>".nl2br($_POST['komentar']);
}
?>
Penjelasan script
Pada form terdapat satu textarea dan satu tombol submit. Ukuran textarea diset tinggi 5 baris dan lebar 50 kolom, kemudian diberi nama komentar. Pada textarea tersebut tidak ditulis text awal, jadi antara tag <textarea> dan </textarea> dikosongkan.
Untuk mengambil data dari form prinsipnya sama seperti yang lain, dalam hal ini form di submit dengan metode post maka pengambilan data menggunakan variabel $_POST. Kemudian data akan dicek, jika kosong/belum diisi akan ditampilkan pesan “Anda belum mengisi komentar!”. Dan jika sudah diisi akan ditampilkan dengan
terlebih dahulu diproses oleh function nl2br() untuk menambahkan tag
pada baris baru.
Referensi :
- //www.w3schools.com/tags/tag_textarea.asp