HTML cols Attribute

Introduction

The cols attribute is a valuable feature in HTML that is specifically used with the <textarea> element to define the visible width of a text area. This attribute allows developers to specify the number of visible columns in the text area, providing control over the layout and presentation of multiline text input.

What You’ll Learn

Purpose of cols

The primary purpose of the cols attribute is to define the visible width of the text area, representing the number of columns that should be visible to the user. It helps in controlling the presentation of multiline text input fields, ensuring a consistent and visually appealing layout.

📝 Syntax

Add cols to a <textarea> element with a positive integer:

<textarea cols="40" rows="5">Enter text here...</textarea>

Syntax Rules

• Only valid on <textarea> elements.
• Value must be a positive integer (e.g. 20, 40, 80).
• Represents average character width, not exact pixels.
• Pair with rows to control both dimensions of the text area.

💎 Values

The cols attribute accepts a numerical value representing the number of columns in the text area. The value should be a positive integer.

• cols="20" — Narrow text area, suitable for short comments.
• cols="40" — Common default for general message fields.
• cols="80" — Wide text area for longer content or code snippets.

<textarea cols="20" rows="3">Short comment</textarea>
<textarea cols="40" rows="5">Standard message</textarea>
<textarea cols="80" rows="10">Long content</textarea>

Applicable Elements

Examples Gallery

Basic textarea width with cols and dynamic JavaScript adjustment.

<textarea cols="40" rows="5">Enter text here...</textarea>

<textarea id="dynamicTextArea" rows="4"></textarea>

<script>
  // Dynamically set cols for a text area
  document.getElementById("dynamicTextArea").cols = 50;
</script>

♿ Accessibility

• Always use labels — Pair every <textarea> with a visible <label> or aria-label.
• Do not rely on size alone — cols sets visual width; assistive tech does not communicate column count as a constraint.
• Allow resizing when helpful — CSS resize: vertical lets users expand the field if needed.
• Test on mobile — Fixed column widths may overflow small screens; use CSS max-width: 100%.
• Provide maxlength if needed — Use maxlength to limit input, separate from cols visual width.

💡 Best Practices

• Use the cols attribute to define an appropriate width for your text areas, keeping in mind the expected content and overall design of your web page.
• Test the text area layout across different screen sizes to ensure a responsive and user-friendly experience.
• Combine the cols attribute with the rows attribute to control both the width and height of your multiline text input fields effectively.