Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we display the visible width of a text area in HTML?
The cols attribute in HTML is used to specify the visible width of a <textarea> element. It defines how many average character widths the textarea should display horizontally before text wraps to the next line.
Syntax
Following is the syntax for using the cols attribute −
<textarea cols="number">Content</textarea>
Here, number represents the visible width in characters. The default value is typically 20 characters if not specified.
Using the cols Attribute
The cols attribute accepts a positive integer value that determines the textarea's width. A higher value creates a wider textarea, while a lower value makes it narrower.
Example − Different Width Values
Following example demonstrates textarea elements with different cols values −
<!DOCTYPE html> <html> <head> <title>Textarea Cols Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 15px;"> <h2>Textarea Width Examples</h2> <h3>Small Width (cols="20")</h3> <textarea rows="3" cols="20">This is a small textarea with 20 character width. Notice how the text wraps.</textarea> <h3>Medium Width (cols="40")</h3> <textarea rows="3" cols="40">This is a medium textarea with 40 character width. You can see more text fits on each line.</textarea> <h3>Large Width (cols="60")</h3> <textarea rows="3" cols="60">This is a large textarea with 60 character width. Even longer sentences can fit on a single line without wrapping.</textarea> </body> </html>
The output shows three textareas with progressively increasing widths −
Small Width (cols="20") [Narrow textarea - text wraps quickly] Medium Width (cols="40") [Medium textarea - more text per line] Large Width (cols="60") [Wide textarea - longest lines before wrapping]
Using cols with rows Attribute
The cols attribute is commonly used together with the rows attribute to define both the width and height of a textarea. The rows attribute specifies the visible number of lines.
Example − Complete Textarea Dimensions
Following example shows how to create textareas with specific dimensions −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Dimensions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Contact Form</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" style="width: 300px; margin-bottom: 10px;"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" cols="50" placeholder="Enter your message here..."></textarea><br>
<input type="submit" value="Send Message" style="margin-top: 10px; padding: 8px 16px;">
</form>
</body>
</html>
This creates a practical contact form with a textarea that is 50 characters wide and 5 rows tall.
CSS vs cols Attribute
While the cols attribute sets the textarea width, you can also use CSS properties like width for more precise control. However, the cols attribute remains useful for semantic HTML and ensures consistent character-based sizing across different fonts.
Example − CSS vs cols Comparison
<!DOCTYPE html> <html> <head> <title>CSS vs cols Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 15px;"> <h3>Using cols attribute</h3> <textarea rows="3" cols="30">This textarea uses cols="30" for width sizing.</textarea> <h3>Using CSS width</h3> <textarea rows="3" style="width: 300px;">This textarea uses CSS width="300px" for precise pixel sizing.</textarea> </body> </html>
Both approaches control the textarea width, but CSS offers pixel-perfect control while cols provides character-based sizing that adapts to font changes.
Browser Compatibility and Default Values
The cols attribute is supported in all modern browsers and is part of the HTML specification since HTML 4.01. If not specified, browsers typically default to around 20 characters width, though this can vary slightly between browsers.
| Attribute | Purpose | Default Value | Units |
|---|---|---|---|
| cols | Visible width | ~20 | Characters |
| rows | Visible height | ~2 | Text lines |
| CSS width | Element width | auto | Pixels, %, em, etc. |
| CSS height | Element height | auto | Pixels, %, em, etc. |
Conclusion
The cols attribute provides a simple and semantic way to control the visible width of textarea elements in HTML. It works in combination with the rows attribute to define textarea dimensions based on character count and line height, making it ideal for creating consistent, accessible form layouts.
235 Views
