HTML - Textarea Tag - Tutorialspoint
Có thể bạn quan tâm
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 | hardsoft | 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 |