HTML <textarea> tag
HTML <textarea> tag is used to define a multi-line plain-text editing control. It’s used in forms to collect user inputs like comments or reviews. Attributes like cols and rows define its size, while the name is needed for form data submission and the ID for label linkage. It renders text in a fixed-width font.
Syntax:
<textarea>....</textarea>
HTML textarea tag Attribute values
Attribute | Description |
---|---|
autocomplete | Specifies whether the textarea field has autocompleted on or off. |
autofocus | Specifies that the textarea field should automatically receive focus when the page loads. |
cols | Tells the browser how many average-width characters should fit on a single line, i.e., the number of columns. |
dirname | Enables setting the text direction of the textarea field after submitting the form. |
disabled | Specifies that the textarea element is disabled. |
form | Specifies one or more forms that the <textarea> element belongs to. |
maxlength | Specifies the maximum number of characters entered into the textarea element. |
minlength | Defines the minimum number of characters (as UTF-16 code units) of a textarea element. |
name | Specifies the name of the <textarea> element. |
placeholder | Specifies the expected value to be displayed before user input in the textarea element. |
readonly | Specifies that the textarea element is read-only. If the textarea is read-only, then its content cannot be changed but can be copied and highlighted. |
required | A boolean attribute that specifies that the <textarea> element must be filled out before submitting the form. |
rows | Specifies the number of visible text lines for the control, i.e., the number of rows to display. |
wrap | Specifies in which manner the text is to be wrapped in a textarea when a form is submitted. |
HTML textarea tag Examples
Example 1: This simple example illustrates the use of the <textarea> tag in HTML that enables the multi-line text input control.
HTML
<!DOCTYPE html> < html > < head > < title >textarea tag</ title > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML Textarea tag </ h2 > < form action = "#" > < textarea rows = "10" cols = "20" name = "blog" > Share your knowledge by writing your own blog! </ textarea > < br > < input type = "submit" value = "submit" > </ form > </ body > </ html > |
Output:
Explanation:
- In this example we are using the <textarea> tag within a <form> element.
- Specifies rows, cols, and name attributes to define its dimensions and identifier.
- Displays placeholder text for user guidance.
- Provides a submit button to send the textarea content to the server.
Example 2: In this example, we have used the resize property whose value is set to none that will disable the resize option of the textarea.
HTML
<!DOCTYPE html> < html > < head > < title >HTML textarea tag</ title > < style > textarea { resize: none; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML Textarea tag </ h2 > < form action = "#" > < textarea rows = "7" cols = "50" name = "comment" > </ textarea > < br > < input type = "submit" > </ form > </ body > </ html > |
Output:
Explanation:
- In the above example we disables resizing of the textarea using CSS.
- Contains a <form> element with a <textarea> tag for user input.
- Specifies rows, cols, and name for defining textarea dimensions and identification.
- Includes a submit button within the form for form submission.
HTML textarea tag Use Cases
To create a text area in HTML, use the <textarea> element with optional attributes like “rows” and “cols” to specify its size and dimensions, respectively.
To set the size of a textarea in HTML, use the “rows” and “cols” attributes within the <textarea> tag, specifying the desired number of rows and columns respectively.
To create a multiline input control textarea in HTML5, use the <textarea> element and specify the number of rows and columns using the “rows” and “cols” attributes respectively.
Supported Browsers
The browser supported by HTML textarea tag are listed below:
Contact Us