<textarea>
HTML <textarea> Tag
The <textarea> tag defines a form field where user can input a multi-line text. Unlike the <input> tag, text wrapping inside <textarea> is allowed when the form is submitted.
A text area can have an unlimited number of characters. The text within this tag is rendered in a fixed-width font (usually Courier).
The <textarea> is used inside the <form> tag.
Syntax
Syntax
The <textarea> tag comes in pairs. The content is written between the opening (<textarea>) and closing (</textarea>) tags.
To define the size of a text field, use rows and cols attributes, or the CSS height and width properties.
Example of the HTML <textarea> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" action="post">
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br>
<input type="submit" name="submitInfo" value="Submit">
</form>
</body>
</html>
Result
In this example we use the <textarea> to define the text field, the name attribute to assign a name to this field (“comment”), the rows attribute to set its height (12 symbols) and the cols attribute to set its width (35 symbols).
Styling the <textarea> element with CSS
Styling the <textarea> element with CSS
The <textarea> tag is considered to be a replaced element, as it has some intrinsic dimensions. Styling this tag is relatively easy with regular CSS.
Its valid and invalid values can be highlighted with the :valid and :invalid pseudo-classes. Valid and invalid values of a <textarea>element can be highlighted using the :valid and :invalid pseudo-classes.
In most browsers, <textarea> is resizable due to the CSS resize property. Resizing is enabled by default. You can disable it putting the resize value to none.
Example of the HTML <textarea> tag with CSS properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Here we use CSS styles to customize the look of the text field.</p>
<textarea class="comment"> Send your comments to the author.</textarea>
<br>
<input type="submit" name="submitInfo" value="Submit">
</form>
</body>
</html>
In this example we use CSS styles to customize the look of the text field.
Attributes
Attributes
| Attribute | Value | Description |
|---|---|---|
| autocomplete | onoff | Specifies whether or not a text field should have autocomplete enabled. |
| autofocus | autofocus | Defines that a text area should automatically get focus when the page loads. |
| cols | number | Defines the visible width of a text area. |
| Default value is 20 symbols. | ||
| dirname | textareaname.dir | Defines the text direction of the textarea when submitted. |
| disabled | disabled | Defines that a text area should be disabled. |
| form | form_id | Defines one or more forms the text area belongs to (via id). |
| maxlenght | number | Defines the maximum number of characters allowed in the text area. |
| minlength | number | Defines the minimum number of characters allowed in the text area. |
| name | text | Defines a name for a text area. |
| placeholder | text | Defines a short hint that describes the expected value of a text area. The hint is shown when the field is empty, and disappears when it gets focus. |
| readonly | readonly | Defines that a text area is read-only. |
| required | required | Defines that a text area must be filled out before the form is sent. |
| rows | number | Defines a visible number of rows in a text area. |
| Default value is 2. | ||
| spellcheck | truefalsedefault | Specifies whether the text in the <textarea> tag should be spell checked by the underlying browser/OS. |
| wrap | Defines how the text in a text area is to be wrapped when the form is submitted. | |
| soft | -(default value) the text is sent without any additional line breaks inserted. | |
| hard | -the browser automatically inserts line breaks so that each line has no more than the width of the control; for this to take effect the cols attribute must be specified. |
The <textarea> tag also supports the Global Attributes and the Event Attributes.
How to style <textarea> tag? Common properties to alter the visual weight/emphasis/size of text in <textarea> tag:
CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit. CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element. CSS font-size property sets the size of the font. CSS font-weight property defines whether the font should be bold or thick. CSS text-transform property controls text case and capitalization. CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in <textarea> tag:
CSS color property describes the color of the text content and text decorations. CSS background-color property sets the background color of an element.
Text layout styles for <textarea> tag:
CSS text-indent property specifies the indentation of the first line in a text block. CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user. CSS white-space property specifies how white-space inside an element is handled. CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for <textarea> tag:
CSS text-shadow property adds shadow to text. CSS text-align-last property sets the alignment of the last line of the text. CSS line-height property specifies the height of a line. CSS letter-spacing property defines the spaces between letters/characters in a text. CSS word-spacing property sets the spacing between words.