HTML cols Attribute

HTML cols Attribute

The HTML cols attribute specifies the expected maximum number of characters per line in a <textarea> control. Browsers can use this value as a hint when determining the visible width of the text area.

Syntax

The cols attribute is specified on a <textarea> element using a positive integer.

<textarea cols="40"></textarea>

In this example, the text area has a character width of 40.

Attribute Value

The value of the cols attribute must be an integer greater than zero.

Elements That Use the cols Attribute

The cols attribute applies to the <textarea> element.

Using the cols Attribute

The cols attribute can be used to give a text area an appropriate initial width for the expected content.

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" cols="40"></textarea>

The browser can use the value as a hint that approximately 40 characters should fit on each displayed line before the text wraps.

Default Value

If the cols attribute is omitted, or its value does not produce a number greater than zero, the text area's character width defaults to 20.

<!-- Character width defaults to 20 -->
<textarea></textarea>

Specifying cols allows the document author to provide a different character-width hint when appropriate.

Using cols with rows

The cols and rows attributes are commonly used together to provide the initial dimensions of a text area. The cols attribute controls its character width, while rows specifies the number of visible text lines.

<textarea name="message" cols="40" rows="6"></textarea>

This example requests a text area with a character width of 40 and a height of six lines.

Using cols with wrap

The wrap attribute controls how text wrapping is handled when the value of a <textarea> is submitted. When wrap="hard" is used, the cols attribute must also be specified.

<textarea name="message" cols="40" rows="6" wrap="hard"></textarea>

With hard wrapping, the browser adds line breaks to the submitted value so that lines are wrapped according to the text area's character width.

cols and CSS Width

The cols attribute describes the text area's width in terms of characters rather than CSS units. CSS can be used when precise or responsive visual sizing is required.

textarea {
  width: 100%;
  max-width: 500px;
}

CSS sizing can affect the rendered width of the control independently of the value specified by cols. The cols attribute remains useful for describing the control's expected character width and is required when wrap="hard" is used.

Common Mistakes

Do not use zero or a negative number for cols. A conforming value must be greater than zero.

<!-- Incorrect -->
<textarea cols="0"></textarea>

<!-- Correct -->
<textarea cols="40"></textarea>

Do not confuse cols with a maximum character limit. The attribute provides a character-width value for the control; it does not limit how many characters the user can enter. Use maxlength when the total length of the entered value needs to be restricted.

Do not omit cols when using wrap="hard". Hard wrapping requires the text area to have a specified character width.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The cols attribute on the <textarea> element is widely supported in current core browsers. Its former use on the obsolete <frameset> element should not be used in modern HTML.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the cols Attribute

The example shows text areas with different cols values so you can compare how the attribute affects their initial character widths.

Summary

The HTML cols attribute specifies the expected maximum number of characters per line in a <textarea> and provides its character-width value. Its value must be greater than zero, and the default character width is 20 when a usable value is not specified. The attribute is commonly combined with rows and is required when wrap="hard" is used.