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 I will try to explain everything related to the 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 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. font-size 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-explainatory: _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 attribute, you can add a placeholder, as in all input fields. placeholder The specifies the maximum number of characters allowed. defines the "width" of a textarea by a number of the average character width (default value is 20) and defines the height of a textarea by the number of the text lines (default value is 2). maxlenght cols rows The attribute defines newline presentation on the submitted text. Values for these attributes are (default), and . wrap soft off hard By choosing to turn the wrap , text in the textarea will not break until you press return/enter. off By choosing , the submitted text contains newlines and by choosing it isn’t. For a better understanding of this attribute checkout . hard soft 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 doesn't work. white-space:nowrap; 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 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 you can use. one of the hacks 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 once read this text I’m sure you will master it! Thank you for reading! Originally published at kolosek.com on July 17, 2018.
