Textarea Tag Busted

The textarea is an 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 post, we'll go over all the options for using this tag, along with some often asked questions about it.

Keep in mind that this text is the second in a series, after an article oninput [type="text"].

About Textarea

The default textarea tag is presented with a border and a graphic in the bottom right corner. 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 attribute of the text inside of it. So, if it isn't custom defined, 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. The most common are:

• autofocus
• readonly
• required
• disabled

All of these 4 attributes are pretty self-explanatory: autofocus makes the textarea focused when the page loads; the  readonly , required and disabled attributes add just that state to the textarea.

The following five attributes are used for styling and defining the textarea with greater accuracy.

• placeholder
• maxlength
• cols
• rows
• wrap

With the placeholder attribute, you can add a placeholder, as in all input fields. The maxlenght attribute specifies the maximum number of characters allowed. cols defines the "width" of a textarea by the 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 the new line presentation on the submitted text. Values for these attributes are soft (default), off , and hard .

By choosing to turn the wrap off , the text in the textarea will not break until you press return/enter.

By choosing hard , the submitted text contains new lines, but if you choose  soft it doesn't. For a better understanding of this attribute checkout this  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 the option white-space:nowrap; doesn't work.

Resize Problem

There are a few problems with resizing related to textareas. To define the height and width of the textarea, you can use the cols and  rows   attributes, or CSS standard styling (better).

The next problem includes removing 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 is the default scrollbar on the textarea in all versions of IE. Luckily, a solution is just a few lines.

textarea {
     overflow: auto;
 }

The problem typically associated with resizing, though, is auto resizing. Unfortunately, there is still no option for textarea auto resizing, but this article outlines one of the hacks you can use.

Reset Design

Specific styling options for textarea are the same as the ones for inputs. So, you can style the border, background, text, placeholder text, and states. I found a few examples of a non-standard textarea, but it was difficult; so that proves that textarea is one of those, 'it's okay to be standard' elements.

Closing

The textarea tag is commonly used and its options are really simple. After you once read this text I'm sure you will master it!