The <textarea> tag in HTML defines a multi-line plain-text editing control. A text space will hold an infinite range of characters, and therefore the text renders in a set-width font (usually Courier). The size of a text area is often such by the cols and rows attributes, or perhaps better; through CSS’ height and dimension properties. The textarea is generally used in a form, to collect user inputs like comments or reviews. The name attribute is needed for the reference in the form data after the form is submitted. By omitting the name attribute, data from the text area will not be submitted. The id attribute is required to link the text area with a label.
Syntax:
<textarea>....</textarea>
Attribute values:
- autocomplete: It is used to specify whether the Textarea field has autocompleted on or off.
- autofocus: It is used to specify that the textarea field should get automatically focus when the page loads.
- cols: It is used to tell the browser how many average-width characters should fit on a single line i.e the number of columns to display.
- dirname: It is used to enable the text direction of the Textarea Field after submitting the form.
- disabled: It is used to specify that the text area element is disabled.
- form: It is used to specify the one or more forms that the <Textarea> element belongs to.
- maxlength: It is used to specify the maximum number of characters entered into the Textarea element.
- minlength: It is used to define the minimum number of characters (as UTF-16 code units) of a Textarea Element.
- name: It is used to specify the name of the <Textarea> element.
- placeholder: It is used to specify the expected value to be displayed before user input in textarea element.
- readonly: It is used to specify 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: It is a boolean attribute that is used to specify that the <textarea> element must be filled out before submitting the Form.
- rows: It is used to specify the number of visible text lines for the control i.e. the number of rows to display.
- wrap: It is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted.
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>GeeksForGeeks</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:
HTML <textarea> Tag
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>GeeksforGeeks</h1>
<h2>HTML Textarea tag </h2>
<form action="#">
<textarea rows="7"
cols="50"
name="comment">
</textarea>
<br>
<input type="submit">
</form>
</body>
</html>
|
Output:
HTML <textarea> Tag
Supported Browsers:
- Google Chrome
- Internet Explorer
- Microsoft Edge 12
- Firefox
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
22 Jul, 2022
Like Article
Save Article