HTML - cols 屬性



HTML 的cols屬性用於設定或指定文字區域元素的可見寬度。如果它用在文字區域元素中。

如果我們沒有為 cols 屬性指定任何值,它將自動考慮預設值 20。除了 cols 屬性外,我們還可以使用 CSS width 屬性來設定此元素的可見寬度。

cols 屬性與<textarea>和<frameset>標籤一起使用,由於<frameset>標籤在 HTML5 中不受支援,因此我們只將其與<textarea>一起使用。

語法

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

應用於

下面列出的元素允許使用 HTML cols 屬性

元素 描述
<textarea> HTML <textarea>標籤用於輸入多行文字。
<frameset> HTML <frameset>標籤用於指定框架集中行和列的數量及其畫素。

HTML cols 屬性示例

以下程式碼演示了 cols 屬性的使用

指定寬度的 cols 屬性

在以下示例中,我們在文字區域欄位中使用 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 屬性

在此示例中,我們在文字區域元素中使用“cols”屬性,但我們沒有為其分配任何值。但它將在網頁上顯示 20 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>Address</label>
      <br>
      <textarea cols="" rows="5"></textarea>
      <br>
      <button>Submit</button>
   </form>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
cols
html_attributes_reference.htm
廣告

© . All rights reserved.