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.
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:
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.
<!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.valueYou can set the HTML TextArea Default Value by adding content (text) between opening and closing of <TextArea> tag. Like
<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 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
<textarea id="address" disabled=""> 42 Link Road
Bangalore </textarea>TextArea resize
At the left-bottom TextArea resize
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.
Attributes | Important
Below is Addtional HTML textarea attributes, which you can use in TextArea Input Tag.
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a text area should automatically get focus when the page loads |
| cols | number | Specifies the visible width of a text area |
| dirname | textareaname.dir | Specifies that the text direction of the textarea will be submitted |
| disabled | disabled | Specifies that a text area should be disabled |
| form | form_id | Specifies one or more forms the text area belongs to |
| maxlength | number | Specifies the maximum number of characters allowed in the text area |
| name | text | Specifies a name for a text area |
| placeholder | text | Specifies a short hint that describes the expected value of a text area |
| readonly | readonly | Specifies that a text area should be read-only |
| required | required | Specifies that a text area is required/must be filled out |
| rows | number | Specifies the visible number of lines in a text area |
| wrap | hard 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:
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 E
xamples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version