Textarea Forms

B efore we begin, lets first define what a "Textarea" form box is. If you would follow the below link, it is clearly defined.
[ Define Textarea ]

T hese little boxes can be used for so many things and yet they are also the little forgotten parts of building a website. They can be used for putting codes in and being able to copy the code, they can be used for fill-in areas on forms, putting messages in them or any other use you can come up with. Here are a few different ones you can use. If you notice on the second line of the code the attributes of size (COLS & ROWS).
The "COL" means how wide the textarea box is and the "ROWS" mean how many lines of text will fit inside the box without it scrolling. These you can alter to suit your needs.

T he below code is what it would look like if you want your visitors to copy what is inside the textarea box.

<FORM>
<TEXTAREA COLS="48" ROWS="5">
This is where you would add any text or HTML
Image tags, java scripts etc. It can be put here for copying
</TEXTAREA>
</FORM>

Read Only Textarea Form

YOU CAN COPY ME BUT...... TRY TO EDIT ME!!!!!!!

I f you do not want anyone to cut or modify what is inside the form, this little trick is for you. It is a regular textarea form with an added attribute of "READONLY". See below:

<textarea name="test" rows=6 cols=45 wrap="virtual" READONLY>
Insert Material Here
</textarea></p>

With this type of textarea, you no longer need to provide large textareas in your forms. This script will resize textarea boxes to fit the text in them. To see this example, grab the below link and you are there.
[ Textarea Sizer ]

T he next example is slightly different than the rest. This is a two part java script that is implimented when you want to add the option to the textarea box of clicking
on a "Select All" link to high light or "Select All" within the box.

D epending on your knowledge of HTML and java scripts, this is an easy, two part copy and paste code that is inserted into the <HEAD> section and the <BODY> section of your document.

T o reconfigure the size attributes of the box is like every other example on this page. Now the only other basic reconfiguration is with the "Select All" link itself on top of the textarea box. This is part of the <HEAD> section and is basically a Cascading Style Sheet (CSS) effect. Below is the part of the code you would reconfigure for this. Just change what we have color coded to the color to your choice to adapt to your pages. Hex codes are not necessary as you can see for this. We have changed ours to the color Black for cosmetic reasons.

More Info On Configuring The Script

T he key to adding the "Highlight" feature to your form elements, as illustrated in the code of Step 2, are:

1)    Giving your form a name (ie: <form name="test">:

2)    Giving the form element in question a name (ie: <textarea name="select1">

3)    Adding the <a> code:

<a class="highlighttext" href="javascript:HighlightAll('test.select1')">Select All</a>

directly above the form element, where the part in red references the form, then the element to highlight's name (note the quotation marks around it).

I f you would like to add this effect to your textarea boxes, just follow the below link and grab the code.
[ Get Code Here ]

T his example is basically used inside a form for your visitors to type in lengthy answers or explanations. If you notice this code besides having the attributes of size it also has the attribute of "TEXTAREA wrap="virtual". This means that once the words get to the end of the box they will automatically go to the next line.
Try it to see how it works.

<p><B>Short Description<br>Of Your Site</B><br>
<TEXTAREA wrap="virtual" name="description" cols="35" rows="5">
</TEXTAREA></P>

T hese next two examples are also used inside a form but the first of the two has the attributes of limiting the amount of characters and putting a message inside the box as a reminder of what needs to be put inside the box. The attribute "maxlength="100" is to denote how many characters to allow in the box before it cuts you off. The attribute "value=" means you can type into the box any message you require. You can also leave it blank and there will not be a message in the box. These you can change to what you need. The attribute "size="40" denotes how wide the box is and can be altered to your requirements.

<BR><B>Your e-mail address</B>
<BR><INPUT TYPE=TEXT NAME=replyemail SIZE=40>

T he ones you put in a form are not functional other than you can type into them. They will not go anywhere because they need to be set up in a form with the capabilities of being emailed to you.

T he below color effect cannot be seen in Netscape4.08.

T his next one is how to spice up the inside of your textarea boxes. You can add color, backgrounds etc. to the inside so it will blend into your site very well

<form>
<textarea cols="48" rows="5" wrap="virtual" style="background-color: #e6e6fa; color: #9400d3; font-weight: bold; font-size: 12pt;">
This is where you would add your message.
You can add any message you want to here.
</textarea>
</form>

I f you notice on the above the parts of the code that are in Lime Green These are where you can make your reconfigurations to fit the look and feel of your page. Now one last thing if you are wondering about the <B> </B>. They are attributes for bold face font. You can either leave them and those words would be Bold Face or you can just remove them.

Hidden Form Field

H ave you ever been filling out a form and or logged into a site and as you are typing in your password, all you see is either astericks or dots and wonder how this is being hidden from the naked eye. Well, look no further, this is very easy to acomplish. All you have to do is change the attribute type in the textarea form and it will make the text not visible and replace it with astericks or dots. grab the below link to see exactly howto.
[ Howto ]

Material Inside Textarea Form Does Not Appear Correctly

<FORM>
<TEXTAREA COLS="48" ROWS="5">
Place Material Here
</TEXTAREA>
</FORM>