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 contain an unlimited number of characters. The text between opening <textarea> and closing </textarea> tags is rendered in a fixed-width font (usually Courier).
Syntax
The <textarea> tag comes in pairs, the content is written between opening (<textarea>) and closing (</textarea>) tags.
The <textarea> is used inside the <form> tag.
To define the size of a text field you can use cols and rows attributes, or use height and width CSS properties. To prevent a text field from being resized you can use CSS resize property .
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<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, use name attribute to assign a name to this field (“comment”), use rows attribute to set its height (12 symbols) and cols attribute to set its width (35 symbols).
Example
<!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>Result
In this example we use CSS styles to customize the look of the text field.
Attributes
| Attribute | Value | Description |
|---|---|---|
| autocomplete | on off | 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 | true false default | 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 signaled 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: Allow setting the spacing between words.
0 Comments
CAN FEEDBACK
Emoji