Different types of textarea (HTML)

1. Normal text area (HTML)
2. Control the dimension of textarea (HTML)
3. A textarea with background image/picture (HTML)
4. A textarea with background color (HTML)
5. A textarea with color font (HTML)
6. A textarea that can show HTML code (HTML)
7. A textarea that auto highlight the words (HTML mouseover)

1. Normal Textarea (HTML)

-A textarea is to use to show the text or words within a box.

sample:
This is a simple text area

code:
<textarea>This is a simple text area</textarea>

2. Control the dimension of textarea (HTML)

You can control the size by changing the "cols" and "rows".

sample here: this textarea has cols="45" and rows="8"
code:
<textarea class="codecontainer" cols="45" rows="8">text here</textarea>

3. A textarea with background image/picture (HTML)

The textarea will not follow the dimension of the background image, so you need to change the dimension of textarea yourself.
sample:

text here
code:
<textarea cols="22" rows="12" style="background-image: url(Your image URL here);">text here </textarea>

4. A textarea with background color (HTML)

sample:
text here
code:
<textarea cols="23" rows="2" style="background-color: blue;">text here</textarea>

5. A textarea with color font (HTML)

Control the font size by changing the "font:18px"
Control the font color by changing the "color: blue"

sample:
text here
code:<textarea cols="23" rows="2" style="color: blue; font: 18px cursive;">text here</textarea>

6. A textarea that can show HTML code (HTML)

sample:

HTML code here...<script type="text/javascript">

code:
<textarea class="codecontainer" cols="45" rows="3" wrap="virtual">text and code here</textarea>

7. A textarea that auto highlight the words (HTML mouseover)

sample:
text here here here
code:
<textarea cols="45" onfocus="this.select()" onmouseover="this.focus()" rows="3">text here here here</textarea>