HTML - <textarea> Tag

The HTML <textarea> element is used to represent a multiline plain-text editing control. It is useful when you want to allows user to enter a sizeable amount of free-form text.

The best example of the <textarea> tag is to write comments on a review, feedback form, and story content.

Following are 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 − row and column attribute the specifies the exact size of the <textarea>.

Syntax

Following is the syntax for HTML <textarea> tag −

<textarea>.......</textarea>

Specific Attributes

The HTML <button> tag also supports the following additional attributes −

S.No. Attribute & Description
1

autofocus

Specifies that on page load the text area should automatically get focus.
2

cols

Specifies the width of the textarea based on the number of visible character widths.
3

disabled

Specifies the width of the textarea based on the number of visible character widths.
4

form

Specifies one or more forms.
5

maxlength

Specifies the maximum number of characters in textarea.
6

name

Assigns a name to the input control.
7

placeholder

Specifies a short hint of the value in textarea.
8

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.
9

required

Specifies that a textarea is required.
10

rows

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.
11

wrap

Specifies the text to be wrapped in textarea.

Example

In the following program, we are using the <textarea> tag to create a textarea field in an HTML that does not contain any attribute.

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

When we run the above code, it will generate an output consisting of the textarea field on the webpage.

Example

Following is another example of the HTML <textarea> tag. Here, we are creating a textarea element using the <textarea> tag that contains the default attributes: name, id, row, and cols.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
</head>
<body>
   <!--create a textarea element(tag)-->
   <textarea name="feedback" id="demo" cols="30" rows="10"></textarea>
</body>
</html>

On running the above code, the output window will pop up displaying the textarea field on the webpage.

Example

In this example, we are creating a textarea element using the HTML <textarea> tag. Then, using CSS, we're styling it, and using the placeholder attribute, we're specifying a short hint of the value in the textarea. 

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

When we running the above code, it will generate an output consisting of the textarea field along with a CSS applied to it displayed on the webpage.

Example

Considering the following example, where we are going to use the min and max attributes. 

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 350px;
         height: 120px;
         background-color: rgb(222, 216, 216);
         font-size: 18px;
         padding: 10px 10px;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <p>Write your review minimum of 10 characters and a maximum of 20 characters: </p>
   <textarea placeholder="Write your review..." minlength="10" maxlength="20"></textarea>
</body>
</html>

On running the above code, the output window will pop up displaying the text area field that are used with min and max attributes on the webpage.

Example

Let's look at the following example, where we are going to use the disabled attribute. 

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

When we run the above code, it will generate an output consisting of the textarea field used with disabled attribute displayed on the webpage.

html_tags_reference.htm
Advertisements