HTML TextArea Input | Placeholder, Value, Resize, Readonly | Examples

HTML TextArea Tag is used in a web application, where needs multiple lines of text input or long text content. For example in e-commerce sides like Flipkart and Amazon needed a user address. That time the user has to fill the address details. Another example is where the same size text field required is the Review and Comment section. This both are the example of where HTML TextArea Input Field has used.

HTML TextArea Input | Placeholder, Value, Resize, Readonly | Examples

This tutorial, you will learn about How to use TextArea tag in HTML, set the placeholder, make it read-only and get the value with examples. Also will discuss how to with CSS we can set width and height of HTML Input TextArea.


A simple HTML Textarea syntax. The size of the TextArea tag in HTML specified by the column and row attributes.

Example | TextArea

Use a <textarea> tag with a rows and cols attributes, see below code.


HTML TextArea Example output

TextArea Readonly  | No input

How to do HTML TextArea Readonly?

It’s very easy to make disabled the TextArea using a “readonly” attribute in the tag element. See below ling code.

TextArea Placeholder | Hint

An HTML TextArea Placeholders help to user understand what value will come here. Mena’s user gets easily hint about it what content he has to enter this TextArea. See the below example it. You need to use the PlaceHolder attribute in the TextArea input tag.

Output: A GIF image of how the placeholder will show a hint to the user. But when you start entering text, it will go.

html textarea placeholde example output

HTML TextArea Value

A without Getting HTML Textarea value is not useful until TextArea is ReadOnly.

See the below HTML TextArea Value Attribute code.

You can set the HTML TextArea Default Value by adding content (text) between opening and closing of <TextArea> tag. Like a below example code.

A Complete example of get the <TextArea> tag user entered value.

Output: See below GIF how output will look.

HTML TextArea Value Attribute code example

HTML TextArea maxlength 

Do You know? You can set the limit of TextArea by using the HTML TextArea maxlength attribute.

See below example code line. By adding maxlength attribute with the value it 10, then only 10 characters the user can enter.


Is it possible to do HTML Textarea disabled? Yes by using a Disabled attribute in a tag like – <textarea disabled>.

See Below for example code line. After this, a TextArea is not editable. A User can edit or enter any value.

TextArea resize

At the left-bottom TextArea resize optionally available. Where users can easly increase the size of it.

You can do the HTML textarea size property fixed by using CSS code in element- style=”resize:none”

Output: See GIF with and without resize option TextArea box.

HTML TextArea resize example output

Attributes | Important

Below is Addtional HTML textarea attributes, which you can use in TextArea Input Tag.

autofocusautofocusSpecifies that a text area should automatically get focus when the page loads
colsnumberSpecifies the visible width of a text area
dirnametextareaname.dirSpecifies that the text direction of the textarea will be submitted
disableddisabledSpecifies that a text area should be disabled
formform_idSpecifies one or more forms the text area belongs to
maxlengthnumberSpecifies the maximum number of characters allowed in the text area
nametextSpecifies a name for a text area
placeholdertextSpecifies a short hint that describes the expected value of a text area
readonlyreadonlySpecifies that a text area should be read-only
requiredrequiredSpecifies that a text area is required/must be filled out
rowsnumberSpecifies the visible number of lines in a text area
Specifies how the text in a text area is to be wrapped when submitted in a form

HTML Textarea Width and Height | How to

To set an HTML TextArea Height and Width you can use cols and rows attributes with CSS code or else only use CSS.

See the below example of it. Using inline CSS style.


HTML Textarea Width and Height

So you now understand the why HTML TextArea Required in Web App. If you have any doubt and suggestion. Then comment on it.

Note: The All HTML TextArea Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.