Blog Belajar HTML: Tag textarea HTML5

Tag <textarea> digunakan untuk menampung teks multi baris. Pada HTML5 <textarea> ditambahkan fitur-fitur di antaranya autofocus, maxlength dan minlength. Fitur-fitur ini membuat texarea tak hanya berfungsi sebagai media penampung teks saja tetapi sudah lebih interaktif.

Atribut dasar <textarea> adalah:

cols: lebar rata-rata karakter di dalam textarea, diisi dengan nilai integer. Nilai defaultnya 20.
rows: tinggi rata-rata karakter di dalam textarea.
name: nama variabel textarea.
disabled: textarea dinonaktifkan.
readonly: teks yang ada di dalam textarea tidak dapat diedit, hanya ditampilkan saja.

Contoh: textarea.html dengan name=deskripsi, cols=22, rows=10 dan disertai teks (bawaan), bisanya kosong.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
    </body>
</html>

Output:

Output di Firefox.

Contoh 2: textarea2.html dengan atribut readonly.


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag textarea html</title>

            <style type="text/css">

            </style>

        </head>

    <body>

        <textarea name="deskripsi" cols="22" rows="10" readonly>Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>

    </body>

</html>

Untuk properti disabled sama seperti contoh di atas ganti readonly dengan disabled.

Textarea HTML5
Beberapa atribut textarea pada HTML5 adalah:

autofocus: posisi kursor fokus pada textarea padanya.
maxlength: membatasi (jumlah) karakter maksimal pada textarea, diisi dengan angka bulat (integer).
minlength: membatasi (jumlah) karakter minimal pada textarea,diisi dengan angka bulat (integer).
required: mengharuskan textarea harus diisi, tidak boleh kosong. Jika kosong timbul warna latar merah jambu sebagai tanda peringatan harus diisi.
placeholder: teks penanda sebagai informasi pengisian textarea. Teks placeholder akan hilang ketika user mengisi (mengetik) teks di textarea.

Catatan: atribut-atribut di atas tidak harus semua dideklarasikan, sesuaikan dengan kebutuhan saja.

Contoh: textarea3.html dengan atribut autofocus, minlength dan required.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" autofocus required>Ini teks di dalam textarea kedua.</textarea>
    </body>
</html>

Untuk atribut minlength sama dengan maxlength, bila perlu tinggal ganti maxlength dengan minlength.

Contoh textarea4.html dengan atribut placeholder dengan pesan: "Isi dengan data sebenarnya" yang mengharuskan user mengisi dengan data valid (tidak asal isi).


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" placeholder="Isi dengan data sebenarnya" required></textarea>
    </body>
</html>

Selesai. Selamat mencoba!

Referensi tulisan:

textarea; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sunday, January 4, 2015

Tag textarea HTML5

2 comments: