HTML - Textareas
An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from a user. If you've ever posted on a forum or left feedback on your favorite blog, you probably do so using an HTML textarea.
Embed textareas in HTML documents using the <textarea> tag. Any text placed between the opening and closing textarea tags will be rendered inside the textarea element as the "default" text. This makes for a great way to give users an example or description of how to go about filling out the text area field. Something like, "Please limit your response to 100 characters," would be an ideal description.
HTML Textarea Code:
<textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100 characters.</textarea><br />
<textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200 characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters.</textarea><br />
HTML Textarea Form Element:
As you may have noticed, the attributes cols (columns) and rows control the rendered size of the textarea. These constraints only impact how the textarea is rendered visually, and in no way do they limit the maximum number of characters a user can place inside the textarea. In fact, if you fill up the fields above with text, the fields will just continue to grow as you type and you will be able to scroll up and down as you please. Limits must be set with JavaScript and/or a server-side scripting language such as PHP.
HTML - Textarea Wrap
The wrap attribute refers to how the user input reacts when it reaches the end of each row in the text field. Wrapping can be defined using one of three values:
"Soft" forces the words to wrap once inside the textarea but once the form is submitted, the words will no longer appear as such, and line breaks and spacing are not maintained.
"Hard" wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted the text will transfer as it appears in the field, including line breaks and spacing.
"Off" sets a textarea to ignore all wrapping and places the text into one ongoing line.
HTML Text Area Word Wrap Code:
<textarea cols="20" rows="5" wrap="hard">
As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read and preserves line breaks.
</textarea>
HTML Text Area Word Wrap:
Here's a textarea with no word wrapping at all!
HTML Text Area No Word Wrap:
<textarea cols="20" rows="5" wrap="off">
As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read. </textarea>
HTML Text Area No Word Wrap:
HTML - Text Areas: Readonly
Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has permission to manipulate the text inside the text field.
HTML Readonly Attribute:
<textarea cols="20" rows="5" wrap="hard" readonly="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.
</textarea>
HTML Read Only Text Areas:
This read-only behavior allows a web surfer to see and highlight the text inside the element, but he or she cannot alter it in any way. When highlighted, the user may also Copy (Ctrl + C on a PC, Ctrl-Click on a Mac) the text to local clipboard and paste it anywhere he/she pleases.
HTML - Text Areas: Disabled
Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the field in any way. To accomplish this, set the disabled property to "yes".
HTML Code:
<textarea cols="20" rows="5" wrap="hard" disabled="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.
</textarea>
Disabled Textareas:
Keep in mind that just because users are unable to copy from the screen directly doesn't prevent them from taking a screen capture or extracting the data from the source code. Disabling the textarea offers no security whatsoever.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! | 
