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

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

<textarea>文本內(nèi)容</textarea>

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

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

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

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

注意：此處用到的是 CSS 樣式中的內(nèi)容，讀者只需了解即可。當(dāng)收縮按鈕隱藏后，不能手動調(diào)節(jié)文本域的寬高。

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

文本域其它屬性：

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

1、 cols屬性

cols 屬性用來指定每行可以顯示的字符數(shù)，也就是文本域的可見寬度。一般情況下，如果內(nèi)容超出文本域?qū)挾?#xff0c;會自動換行顯示，但是如果文本內(nèi)容較長，而且在大于文本域?qū)挾葧r，還沒有空格可以進(jìn)行換行，就會出現(xiàn)橫向滾動條。

我們來看一個示例：

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

通過運(yùn)行結(jié)果可以發(fā)現(xiàn)，當(dāng)文本內(nèi)容超出了文本域的寬度時，會自動換行顯示。這時，出現(xiàn)了縱向的滾動條是因?yàn)楦叨炔粔颉Ｏ旅嫖覀兙蛠韺W(xué)習(xí)一下如何設(shè)置文本域的高度。

2. rows屬性

在文本域中，rows 屬性用來設(shè)置文本域的可見行數(shù)，也就是文本域的高度。當(dāng)文本內(nèi)容超出設(shè)置高度時，會出現(xiàn)縱向滾動條。用戶拖動滾動條可以查看全部內(nèi)容。

示例如下：

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

運(yùn)行結(jié)果如圖所示：

通過運(yùn)行結(jié)果可以看出，當(dāng)文本高度小于文本域高度時，不會出現(xiàn)縱向滾動條。

注意：除了使用 rows、cols 屬性設(shè)置文本域的寬高，css 也可以實(shí)現(xiàn)，

3. id屬性

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。