HTML Textareas (HTML Forms tutorials part 6)

Textareas retrieve "blog" type information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area.

HTML Code:

<textarea>Text Area!</textarea>

Default Textarea:

Text Area!

HTML - Text area Cols and Rows

Adjusting the size of the appearance of the text area requires two attributes, cols and rows. Use a numeric value for each attribute and the larger the value the larger the field will appear.

HTML Code:

<textarea cols="20" rows="10">Text Area!</textarea>
<textarea cols="40" rows="2">Text Area!</textarea>
<textarea cols="45" rows="5">Text Area!</textarea>

Bigger Text Areas:

Text Area!
Text Area!
Text Area!

A text area could take up an entire page if required.

HTML - Textarea Wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

• soft
• hard
• off

Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).
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 it appears exactly as it does in the text box.
Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

HTML 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.
</textarea>

Text Area Wrapping:

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.

HTML Code:

<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>

No Wrapping:

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.

HTML - Textarea Readonly

Settting a yes or no value for the readonly attribute determines whether or not a viewer can manipulate the text inside the text field.

HTML Code:

<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>

Read Only Textareas:

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.

Now you may not change the text inside the text area. However, you can still highlight or Ctrl-C and copy the texts.

HTML - Disabled

As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting.

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:

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.