Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Tags:

html

css

textarea

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions:

Use CSS or use the textarea's attributes cols and rows?

What are the pros and cons of each method?

What are the semantics of using these attributes?

How is it usually done?

like image 997
Pherrymason Avatar asked Oct 09 '10 08:10

Pherrymason


People also ask

Which attribute is used to set height and width of textarea control in form?

The cols attribute specifies the visible width of a text area.

What is cols and rows in textarea?

The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).

What does textarea element do what do rows and COLS attributes do?

rows and cols attributes to allow you to specify an exact size for the <textarea> to take. Setting these is a good idea for consistency, as browser defaults can differ. Default content entered between the opening and closing tags. <textarea> does not support the value attribute.


2 Answers

I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.

The recommended way to do it is via an external stylesheet e.g.

textarea {    width: 300px;    height: 150px;  }
<textarea> </textarea>
like image 190
kogakure Avatar answered Sep 22 '22 13:09

kogakure


textarea { height: auto; }
<textarea rows="10"></textarea>

This will trigger the browser to set the height of the textarea EXACTLY to the amount of rows plus the paddings around it. Setting the CSS height to an exact amount of pixels leaves arbitrary whitespaces.

like image 38
Jan Werkhoven Avatar answered Sep 23 '22 13:09

Jan Werkhoven