Membuat Text Area

Kali ini saya akan mengungkap cara membuat text area pada sebuah postingan di dalam blog. Bagi anda yang ingin membuat text area, silahkan ikuti langkah-langkah yang saya sediakan di bawah ini:

1. Text Area biasa

Kode text area diatas:
<textarea name="biasa">Tulis TEXT di sini!</textarea>

2. Text area dengan border warna berbeda

Kode text area diatas:

<textarea name="beda" rows="3" cols="20" style="background:#cbabb0; color:#FF0000; border-bottom: 4px solid #40dd1d; border-right: 4px solid #40dd1d; border-top: 4px solid #ded900; border-left: 4px solid #ded900; line-height:1.5em; padding:5px; -moz-border-radius:10px;">Tulis TEXT di sini!</textarea>

3. Text area dengan border garis putus-putus

Kode text area diatas:

<textarea name="putus" rows="3" cols="20" style="background:#daffbf; color:#295f00; border:2px #295f00 dashed; line-height:1.5em; padding:5px;">Tulis TEXT di sini!</textarea>

4. Text area dengan border dua sisi tumpul

Kode text area diatas:

<textarea name="tumpul" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;">Tulis TEXT di sini!</textarea>

5. Text area hitam

Kode text area diatas:

<textarea name="hitam" rows="3" cols="20" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;">Tulis TEXT di sini!</textarea>

6. Text area dengan efek Shadow

Kode text area diatas:

<textarea name="shadow" cols="20" rows="3" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% Pink; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">Tulis TEXT di sini!</textarea>

7. Text area dengan highlight button

Kode text area diatas:

<div>
<form name="highlight">
<div align="left">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"></div>
<div align="center">
</div>
<p align="left">
<textarea style="width: 190px; height: 94px" name="txt" rows="5" wrap="virtual" cols="20">Tulis TEXT di sini!</textarea></p>
</div>
</form>

Pilih model text area yang anda suka, tinggal co-pas kodenya dan letakkan ke postingan anda. Jangan lupa untuk mengisikan text anda pada tulisan yang berwarna merah. Selamat mencoba, semoga bermanfaat.