The textarea is HTML tag mostly used for messages and comments. It is very similar to inputs, but because it provides an option to have more than one line of text, it is not presented as input [type="textarea"].
In this text, all options of this tag will be present along with the often asked questions about it, and that will be all I believe exist related to textarea.
Keep in mind that this text is second in line, after input [type="text"].
About Textarea
The default textarea tag is presented with border and graphic in the right bottom angle. It is a good practice to add a placeholder, just like in every input field.
<textarea>
</textarea>
A default size of the textarea is defined with font-size of the text inside of it. So, if it isn't defined different, the height of the textarea is defined with 2 lines of text and width is defined with 20 text characters.
Attributes
Some of the most useful options for the textarea element can be defined with its attributes. There is a list of the most common:
- autofocus,
- readonly,
- required,
- disabled,
All of these 4 attributes are pretty self-explained: autofocus makes textarea focused when the page loads, readonly, required and disabled attributes add just that state to the textarea.
- placeholder,
- maxlength,
- cols,
- rows,
- wrap.
These 5 attributes are used for styling and defining textarea more closely.
With the placeholder attribute, you can add a placeholder, as in all input fields. The maxlenght specifies the maximum number of characters allowed. cols defines the "width" of a textarea by a number of the average character width (default value is 20) and rows defines the height of a textarea by the number of the text lines (default value is 2).
The wrap attribute defines newline presentation on the submitted text. Values for these attributes are soft (default), off and hard.
By choosing to turn the wrap off, text in the textarea will not break until you press return/enter.
By choosing hard, the submitted text contains newlines and by choosing soft it isn't. For a better understanding of this attribute checkout html.com post.
<textarea autofocus required placeholder="type your message" maxlength="180" cols="50" rows="6" wrap="hard">
</textarea>
For further styling you should use CSS, just keep in mind that option white-space:nowrap; doesn't work.
Resize Problem
There are a few problems with resizing related to textareas. To define height and width of the textarea you can use cols and rows attributes, or CSS standard styling (better).
The next problem includes removing the resize handle. So, you create a super nice design and everyone has an option to stretch textarea over it. Nah ah! This one is super easy to fix:
textarea{
resize:none;
}
Also, a small but annoying thing about this tag we talk about is the default scrollbar on textarea in all versions of IE. Luckily, a solution is just a few lines.
textarea{
overflow:auto;
}
The most often resize related problem though is autoresize. Unfortunately, there is still no option for textarea autoresize but here it is one of the hacks you can use.
Reset Design
Specific styling options for textarea are the same as ones for inputs. So, you can style border, background, text, placeholder text, states. I found a few examples of a non-standard textarea and it was difficult, so that proves that textarea is one ok-to-be-standard element.
Closing Line
The textarea tag is commonly used and its options are really simple. After you read this text I'm sure you will master it!
If you need a bit of CSS and HTML for your next project, why not leave it to the professionals? Let Kolosek team help you!
This post is originally published at Kolosek Blog.
Top comments (0)