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

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

Syntax

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

<textarea rows="4" cols="50">

Example | TextArea

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

<!DOCTYPE html>
<html>
    <body>

    <h1>HTML TextArea Input</h1>

    <textarea id="tutorial" name="tutorial" rows="5" cols="40"></textarea>
    </body>
</html>

Output:

HTML TextArea Example output

TextArea Readonly  | No input

How to do HTML TextArea Read-only?

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

<textarea id="tutorial" name="tutorial" rows="5" cols="40" readonly=""> You can't edit it...
 </textarea>

TextArea Placeholder | Hint

An HTML TextArea Placeholders help to user understand what value will come here. Mena’s user gets easily hints 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
<!DOCTYPE html>
<html>
    <body>

    <h1>HTML TextArea Input</h1>

    <textarea id="tutorial" name="tutorial" rows="5" cols="40" placeholder="Enter you comment here"></textarea>

    </body>
</html>

HTML TextArea Value

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

See the below HTML TextArea Value Attribute code.

textareaObject.value

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

<textarea name="df">Default value</textarea>

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

<!DOCTYPE html>
<html>
    <body>

    <h1>HTML TextArea Input</h1>

    <textarea id="address">
        42 Link Road
        Bangalore</textarea>

    <button type="button" onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        var x = document.getElementById("address").value;
        document.getElementById("demo").innerHTML = x;
    }
</script>
    </body>
</html>

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.

<textarea name="name" cols="24" rows="4" maxlength="10"></textarea>

Disabled

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 id="address" disabled=""> 42 Link Road
 Bangalore </textarea>

TextArea resize

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

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

<!DOCTYPE html>
<html>
    <body>

    <h1>HTML TextArea Input</h1>
    <textarea name="name" cols="24" rows="4">Resize</textarea>

    <textarea style="resize:none" name="name" cols="24" rows="4">No Resize</textarea>
    </body>
</html>

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.

AttributeValueDescription
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
wraphard
soft
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.

<!DOCTYPE html>
<html>
    <body>

    <h1>HTML TextArea Input</h1>
    <textarea name="name" cols="24" rows="4" style="width: 300px;
        height: 150px;">SIZE 300x150px</textarea>

    </body>
</html>

Output:

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.