HTML - <textarea> Tag

Quiz

Introduction to <textarea> Tag

The HTML <textarea> tag is used to define a multiline text input control allowing the users to input more extensive text, such as comments, feedbacks or messages.

Unlike the <input> tag , which is typically used for single line text fields, but the <textarea> element supports multiple lines making it suitable for scenarios needed larger input areas. The default attributes that are automatically added while creating a <textarea> tag as follows −

id: It allows <textarea> tag to be associated with the label element for accessibility purpose.
name: It is used to set the name of associated data point submitted to the server when from is submitted.
rows & cols: HTML row and column attribute the specifies the exact size of the <textarea>.

Syntax

Following is the syntax of HTML <textarea> tag −

<textarea>
  ....
</textarea>

Attributes

HTML textarea tag supports Global and Event attributes of HTML. It also accpets some specific attributes as well which are listed bellow.

Attribute	Value	Description
autofocus	autofocus	Specifies that on page load the text area should automatically get focus.
cols	number	Specifies the width of the textarea based on the number of visible character widths.
dirname	textareaname.dir	Specifies that the text direction of the textarea will be submitted.
disabled	disabled	Specifies the width of the textarea based on the number of visible character widths.
form	form_id	Specifies one or more forms.
maxlength	number	Specifies the maximum number of characters in textarea.
name	name	Assigns a name to the input control.
placeholder	text	Specifies a short hint of the value in textarea.
readonly	readonly	Sets the input control to read-only. It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls.
required	required	Specifies that a textarea is required.
rows	number	Specifies the height of the textarea based on the number of visible lines of text. If there's more text than this allows, users can scroll using the textarea's scrollbars.
wrap	hard soft	Specifies the text to be wrapped in textarea.

Example : Basic Textarea

Let's look at the following example, where we are going to consider the basic usage of the <textarea> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
</head>
<body>
   <!--create a textarea element(tag)-->
   <textarea></textarea>
</body>
</html>

Example : Textarea with Placeholder

Consider the following example, where we are going to use the placeholder attribute along with the <textarea> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 300px;
         height: 120px;
         background-color: aquamarine;
         padding: 10px 10px;
         font-size: 18px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <h3>Write your feedback: </h3>
   <textarea placeholder="Write your feedback...."></textarea>
</body>
</html>

Example : Using disabled Attribute

Let's look at the following example, where we are going to use the disabled attribute along with the <textarea> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 300px;
         height: 100px;
         background-color: rgb(22, 208, 236);
         font-size: 18px;
         padding: 5px 5px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <p>Your short story here: </p>
   <textarea placeholder="Your story..." name='story' disabled>
   </textarea>
</body>
</html>

Supported Browsers

Tag
textarea	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page