HTML - Textareas

Textareas of this kind are used for comments, blogs, memos, or any other purpose that requires an expression space.

To create a text area we will need an opening and ending tag like this:

html<textarea>Text area!</textarea>

Demo

Textarea - text area size

To change the standard size of a text area we will use columns and rows. Those will have numerical values. The bigger their value will be, the bigger the text area will be.

html<textarea cols="50" rows="2">Text area!</textarea>

<textarea cols="40" rows="5">Text area!</textarea>

<textarea cols="20" rows="10">Text area!</textarea>

Demo

Textarea - The wrap attribute

This attribute of the <textarea> tag, will establish how the text will react when it will reach the end of the line.

Wrap will have one of the three values: hard, soft, off.

• Hard wrap - will place an enter at the end of every line and will send the text in the same format it was introduced.
• Soft wrap - will place an enter at the end of every line, but unlike the Hard one it will send the text in a free format.
• Off wrap - this will not format the text in any way, letting the text in a single continuous line.

The Hard/Soft attribute

html<textarea cols="20" rows="5" wrap="hard">Hard - will place an enter at the end of every line and will send the text in the same format it was introduced.</textarea>

Demo

The off attribute

html<textarea cols="20" rows="5" wrap="off">Off - this will not format the text in any way, letting the text in a single continuous line.</textarea>

Demo

Textarea - The readonly attribute

Depending on the value of this attribute, the user is able (or not) to change the content of the text area. The readonly attribute can have the 'yes' or 'no' values.

html<textarea cols="20" rows="5" wrap="hard" readonly="yes">As you can see this text cannot be modified. In the case in which the 'no' value would be chosen the opposite result would be obtained.</textarea>

Demo

As you can see this text cannot be modified. In the case in which the 'no' value would be chosen the opposite result would be obtained. Even though it cannot be modified, it can be highlighted and copied with CTRL-C or right-click/copy.

Textarea - The disabled attribute

The disabled attribute is not much different from read-only. The text will be shown in gray, disabling at the same time the possibility of modifying the text that the text area contains.

html<textarea cols="20" rows="5" wrap="hard" disabled="yes">The disabled attribute is not much different from readonly. The text will be shown in gray, disabling at the same time the possibility of modifying the text that text area contains.</textarea>

Demo

You will have to practice a bit with these attributes to get better. Good luck!