» Tricks » Kinds Of Text Area

Kinds Of Text Area

Text area is a multi-line text input control. Text area formed by <textarea> tag. The function of text area is to give a frame for special words. But, there are many blogger/webmaster using text area for script box. There are many text area, so now I will give you example the kinds of text area.

Standard Text Area

<textarea>Full Blog Tricks</textarea>

Text Area that can set the widht and height

<textarea cols="20" rows="5">Full Blog Tricks</textarea>

Text Area with password style



<input type="password" value="Full Blog Tricks" />

Text Area with dashed line

<textarea cols="20" rows="5" style="border: 2px dashed ;">Full Blog Tricks</textarea>

Text Area with one click select all

<textarea cols="20" onclick="this.focus(); this.select();" rows="5">Full Blog Tricks</textarea>

Text Area with select all by mouse over (no click)

<div>
<form name="catatancuss">
<div align="left" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 85px; width: 185px;">Full Blog Tricks</textarea></div>
</form>
</div>

Text Area with Select All button
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 85px; width: 185px;" wrap="VIRTUAL">Full Blog Tricks</textarea></div>
</form>
</div>

Colorful Text Area

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px; background: #BFFAFF; border-bottom: 4px solid #40FF1F; border-left: 4px solid #FFE900; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; color: red; line-height: 1.5em; padding: 5px;">Full Blog Tricks</textarea>


<textarea name="code" 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;">Full Blog Tricks</textarea>



<textarea name="code" rows="3" cols="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;">Full Blog Tricks</textarea>


<textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;">Full Blog Tricks</textarea>


<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;">Full Blog Tricks</textarea>

You can use text area for your post or your widgets Hopefully useful... ^_^

3 comments:

Post a Comment

:) :( :)) :D =)) →
Loading Comment Form