- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <textarea> Tag
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
<textarea> .... </textarea>
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 | hard soft |
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> <!--create a textarea element(tag)--> <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> <!--create a textarea element(tag)--> <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> <!--create a textarea element(tag)--> <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> <!--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>
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> <!--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 |