HTML - cols 属性



HTML cols 属性用于设置或指定文本区域元素的可见宽度。如果它在 textarea 元素中使用。

如果我们没有为 cols 属性指定任何值,它将自动考虑默认值,即 20。我们可以使用 CSS width 属性来设置此元素的可见宽度,而不是 cols 属性。

cols 属性适用于 <textarea> 和 <frameset> 标签,由于 HTML5 不支持 <frameset> 标签,我们将仅将其与 <textarea>一起使用。

语法  


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

适用于

下面列出的元素允许使用 HTML cols 属性

元素 描述
<textarea> HTML<textarea>标签用于输入多行文本。
<frameset> HTML<frameset>标签用于指定frameset中的行数和列数及其像素。

HTML cols 属性的示例

以下代码演示了 cols 属性的用法

具有指定宽度的 Cols 属性

在以下示例中,我们在 textarea 字段中使用 HTML 'cols' 属性来指定此元素的可见宽度。


<!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>

具有默认值的 Cols 属性

在此示例中,我们在 textarea 元素中使用了 'cols' 属性,但我们没有为其分配任何值。但它会在网页上以 20 列的值(即默认值)显示。


<!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>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
是否支持 Yes Yes Yes Yes Yes