在使用表單時，例如姓名、年齡字段我們可以使用單行文本框，但是當涉及到描述信息，內容比較多時，單行文本框很有可能放不下所有的內容，這時就需要用到多行文本框。

在 HTML 中，使用 <textarea> 標簽來表示多行文本框，又叫做文本域。與其它 <input> 標簽不同，<textarea> 標簽是單閉合標簽，它包含起始標簽和結束標簽，文本內容需要寫在兩個標簽中間。具體語法格式如下：

<textarea>文本內容</textarea>

接下來我們通過一段簡單的代碼來看一下：
純文本復制

<form action="" method="post">描述信息：<textarea name="description">此處是描述信息</textarea> </form>

運行效果如圖所示：
通過運行結果可以發現，文本域的右下角有一個收縮按鈕，拖拽按鈕可以手動改變文本域的寬高。這個按鈕默認顯示，也可以隱藏，我們來看一下怎么隱藏它呢？

<form action="" method="post">描述信息：<textarea name="description" style="resize:none;">此處是描述信息</textarea> </form>

注意：此處用到的是 CSS 樣式中的內容，讀者只需了解即可。當收縮按鈕隱藏后，不能手動調節文本域的寬高。

同所有表單元素相同，文本域要想正確提交，也必須設置 name 屬性。除了 name 屬性以外，文本域還有其它屬性，接下來我們看一下：

文本域其它屬性：

• cols ----用來指定每行顯示的字符數。
• rows---- 用來指定正常情況下（沒有滾動條）顯示的文本行數。
• id---- 用來定義文本域的唯一 id 屬性。

1、 cols屬性

cols 屬性用來指定每行可以顯示的字符數，也就是文本域的可見寬度。一般情況下，如果內容超出文本域寬度，會自動換行顯示，但是如果文本內容較長，而且在大于文本域寬度時，還沒有空格可以進行換行，就會出現橫向滾動條。

我們來看一個示例：

<form action="" method="post">許三觀對兒子們說：<textarea name="description" cols="40">我知道你們心里最想的是什么。就是吃，你們想吃米飯，想吃用油炒出來的菜，想吃魚啊肉啊的。今天我過生日，你們都跟著享福了，連糖都吃到了，可我知道你們心里還想吃，還想吃什么。</textarea> </form>

通過運行結果可以發現，當文本內容超出了文本域的寬度時，會自動換行顯示。這時，出現了縱向的滾動條是因為高度不夠。下面我們就來學習一下如何設置文本域的高度。

2. rows屬性

在文本域中，rows 屬性用來設置文本域的可見行數，也就是文本域的高度。當文本內容超出設置高度時，會出現縱向滾動條。用戶拖動滾動條可以查看全部內容。

示例如下：

<form action="" method="post">許三觀對兒子們說：<textarea name="description" cols="40" rows="6">我知道你們心里最想的是什么。就是吃，你們想吃米飯，想吃用油炒出來的菜，想吃魚啊肉啊的。今天我過生日，你們都跟著享福了，連糖都吃到了，可我知道你們心里還想吃，還想吃什么。</textarea> </form>

運行結果如圖所示：

通過運行結果可以看出，當文本高度小于文本域高度時，不會出現縱向滾動條。

注意：除了使用 rows、cols 屬性設置文本域的寬高，css 也可以實現，

3. id屬性

id 屬性用來定義文本域的唯一 id 值。為文本域添加 id 屬性，主要有以下 2 個方面：

• 在 css 中，可以使用 id 獲取元素為其添加 css 樣式；
• 在 JavaScript 中，可以根據設置好的 id 屬性獲取文本域，然后對它進行一系列操作，例如操作文本域的內容。

總結

以上是生活随笔為你收集整理的20、HTML ＜textarea＞标签（文本域）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。