HTML - Textarea Tag - Tutorialspoint

Có thể bạn quan tâm

HTML - <textarea> Tag Previous Next

HTML <textarea> tag 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: HTML row and column attribute the specifies the exact size of the <textarea>.

Syntax

Attributes

HTML textarea tag supports Global and Event attributes of HTML. And 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.

Examples of HTML textarea Tag

Bellow examples will illustrate the usage of textarea tag. Where, when and how to use it to create textarea and how we can style that textarea section using CSS.

Creating Textarea Element

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>  <textarea></textarea> </body> </html>

Creating Textarea Element with Attributes

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>  <textarea name="feedback" id="demo" cols="30" rows="10"> </textarea> </body> </html>

Styling Textarea

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>  <h3>Write your feedback: </h3> <textarea placeholder="Write your feedback...."></textarea> </body> </html>

Character restriction on Textarea

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

Disable Textarea

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>  <p>Your short story here: </p> <textarea placeholder="Your story..." name='story' disabled> </textarea> </body> </html>