Cara Mudah Membuat Text Area Di Blogspot

    Text Area 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 yang pertama tentu harus Masuk ke blogger dulu > Buat entri baru > Masuk mode HTML > Copy paste kode textareanya. Textarea dibuat dengan menggunakan tag <textarea> dengan tag penutup </textarea>, jika ingin mengisikan data pada textarea bisa ditaruh diantara tag <textarea> dan </textarea> Contoh Kode Text Area Dasar:

 <textarea>Ganti isi teks ini sesuai keinginan anda</textarea>

 Hasil:

Ganti isi teks ini sesuai keinginan anda

1. Text Area Biasa

Kode:

<div align="center">

<textarea name="code" rows="3" cols=30">Masukkan teks disini sesuai keinginan anda, teks ini nanti akan ditampilkan sebagai isi text area anda</textarea></div>

Hasil:

Masukkan teks disini sesuai keinginan anda, teks ini nanti akan ditampilkan sebagai isi text area anda

2. Text Area Terblok Dalam Sekali Klik
Kode:
<div align="center">
<textarea rows="3" cols="30" onclick="this.focus(); this.select();">Coba klik teks ini di tengah kalimat, maka teks ini akan terblok semua secara otomatis</textarea></div>
Hasil:

Coba klik teks ini di tengah kalimat, maka teks ini akan terblok semua secara otomatis

3. Text Area Dengan Tombol "Highlight All"
Kode:
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="50">Masukkan text yang anda inginkan di sini, jika teks terlalu panjang akan otomatis muncul scroll untuk membantu anda membaca seluruh teks</textarea></p></div></form>
Hasil:

Masukkan text yang anda inginkan di sini, jika teks terlalu panjang akan otomatis muncul scroll untuk membantu anda membaca seluruh teks

4. Text Terblok Semua Saat Disorot Kursor Mouse
Kode:
<div>
<form name="RulERiea">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="50" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Coba anda arahkan kursor mouse anda ke teks ini</textarea></div>
</form>
</div>
Hasil:

Coba anda arahkan kursor mouse anda ke teks ini

5. Text Area Dengan Border
Kode:
<div align="center"><textarea cols="30" rows="3" style="border: 2px dotted red ;">Tulis teks yang anda inginkan disini</textarea></div>
Hasil:

Tulis teks yang anda inginkan disini

6. Text Area Tak Bisa Dihapus
Kode:
<div align="center">
<textarea rows="3" cols="30" onclick="this.focus(); this.select();" readonly="">Coba klik text area ini kemudian hapus teksnya pasti tidak bisa terhapus, sekarang coba hapus text arae di atas pasti bisa terhapus.</textarea></div>
Hasil:

Coba klik text area ini kemudian hapus teksnya pasti tidak bisa terhapus, sekarang coba hapus text arae di atas pasti bisa terhapus.

Keterangan: Supaya text area yang anda buat tidak bisa terhapus, anda hanya perlu menaruh kode readonly="" sebelum kode >text yang akan dimunculkan</textarea></div>.

Catatan: Untuk melakukan pengaturan terharap textarea ada beberapa atribut yang bisa dipakai, diantaranya seperti dibawah ini...!

Name, Merupakan atribut untuk mendefinisikan nama dari textarea. Atribut name ini berupa text.
contoh:
<textarea name="komentar"></textarea>

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>

Cols, Digunakan untuk menetapkan lebar sebuah textarea saat diload. Atribut ini bernilai angka (integer).
contoh:
<textarea cols="50"></textarea>

Rows, Digunakan untuk menetapkan tinggi sebuah textarea saat diload. Atribut ini bernilai angka (integer).
contoh:
<textarea rows="50"></textarea>

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>

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>

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>

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>

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>

Wrap, Atribut ini menentukan bagaimana textarea dikemas saat proses submit form.
contoh:
<textarea rows="2" cols="20" wrap="hard">

Selamat Mencoba!