References

Beginner-friendly references for web development, with live, editable examples.

The HTML cols attribute

Attribute All modern browsers Updated
In short

The HTML cols attribute sets how wide a <textarea> is, counted in average character widths, as in cols="40". The default is 20. A CSS width overrides it, and wrap="hard" uses it to break lines when the form is submitted.

Overview

The HTML cols attribute sets the visible width of a <textarea>, measured in average character widths. It takes a whole number greater than zero and defaults to 20. Invalid values such as 0 or -3 fall back to 20 as well.

Because the unit is an average character, the real width depends on the font. In our Chrome test with 16px Arial, a textarea with cols="10" had a 95px text area, while ten capital W letters measured about 151px and ten lowercase i letters about 36px. Wide letters wrap sooner and narrow ones later.

A CSS width overrides cols whenever both are present, so a rule like width: 100% makes the attribute irrelevant. Large values can also overflow a phone screen. In Chrome's default textarea font, cols="80" came out 608px wide, so add max-width 100% as a guard.

The attribute also shapes submission. For wrap="hard", the HTML standard has the browser insert line breaks into the submitted value so no line is longer than cols characters, and it requires cols whenever wrap is hard.

Syntax

<label for="notes">Notes</label>
<textarea id="notes" name="notes" cols="50" rows="4"></textarea>

Values

Value
A positive integer (default 20).

Example

Live example 
<p><label for="narrow">cols="20", the default</label><br>
<textarea id="narrow" rows="2">Twenty average characters wide</textarea></p>
<p><label for="wide">cols="36"</label><br>
<textarea id="wide" cols="36" rows="2">Thirty-six average characters wide</textarea></p>

Best practices

  • Treat cols as a fallback width and set the real layout with CSS width or max-width.
  • Add max-width: 100% so a large cols value can't overflow a small screen.
  • Expect wide letters to wrap sooner than cols suggests in proportional fonts, since it counts average characters.
  • Set cols whenever you use wrap with the value hard, as the HTML standard requires.

Frequently asked questions

How wide does the cols attribute make a textarea?
The cols attribute sets a textarea's visible width in average character widths. It doesn't limit how many characters a line or the whole field can hold.
What is the default cols value of a textarea?
A textarea without cols is 20 average characters wide. Zero, negative and non-numeric cols values fall back to 20.
Why doesn't cols change my textarea's width?
A CSS width, or a narrower max-width, overrides the cols attribute. Rules such as width: 100% replace the width that cols asks for, and MDN notes that cols has no effect under field-sizing: content.
How do I make a textarea full width?
Set width: 100% in CSS and keep cols as a fallback. Add box-sizing: border-box as well, so the padding doesn't push the textarea past its container.
Does cols matter for wrap=hard?
Yes, the HTML standard requires cols when wrap=hard is set. Under that rule, the submitted text is broken into lines no longer than cols characters.
Is cols the same as the size attribute?
No, cols works only on textarea, not on input. A single-line input uses size for its visible width, and neither cols nor size limits how much text a user can enter.
cite (attr) colspan