HTML - cols Attribute

The HTML cols attribute is used to set or specify the visible width of a text area element. If it is used within a textarea element, its value must be a positive integer. The default value of this attribute is 20.

If we haven't specified any value for the cols attribute, it will automatically consider the default value which is 20. Instead of the cols attribute, we can use the CSS width property to set the visible width of this element.

The cols attribute works with both <textarea> and <frameset> tags, Since the <frameset> tag is not supported in HTML5, we will use it with <textarea> only.

Syntax

Following is the syntax of cols attribute −

<textarea cols = "value"></textarea>

Example

In the following example, we are using the HTML ‘cols’ attribute within the textarea field to specify the visible width of this element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'cols' attribute</title>
</head>
<body>
   <!--HTML 'cols' attribute-->
   <p>Example of the HTML 'cols' attribute</p>
   <form>
      <label>Message: </label>
      <br>
      <textarea cols="30" rows="10" placeholder="Write your message..."></textarea>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the textarea field along with a click button on the webpage.

Example

The following is another example of the HTML ‘cols’ attribute. Here, we are creating a form that contains input, two textarea, and a button element. Then, we use the cols attribute within the textarea element and assign different values 40 and 20 to the cols attribute to specify the visible width of this element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'cols' attribute</title>
</head>
<body>
   <!--HTML 'cols' attribute-->
   <p>Example of the HTML 'cols' attribute</p>
   <form>
      <label>Name: </label>
      <input type="text">
      <br>
      <br>
      <label for="">Email: </label>
      <input type="text">
      <br>
      <br>
      <label for="">Feedback: </label>
      <br>
      <textarea cols="40" rows="5" placeholder="textarea with cols value 40..."></textarea>
      <br>
      <br>
      <label for="">Address: </label>
      <br>
      <textarea cols="20" rows="4" placeholder="textarea with cols value 20..."></textarea>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the input fields along with a click button on the webpage.

Example

In this example, we are using the ‘cols’ attribute within the textarea element, but we have not assigned any value to it. But it will display with 20 cols value(i.e. default value) on the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'cols' attribute</title>
</head>
<body>
   <!--HTML 'cols' attribute-->
   <p>Example of the HTML 'cols' attribute</p>
   <form>
      <label>Address</label>
      <br>
      <textarea cols="" rows="5"></textarea>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the textarea field along with a click button displayed on the webpage.

html_attributes_reference.htm
Advertisements