- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
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.
To Continue Learning Please Login
Login with Google