認識 textarea 文本域標簽

文本域既表示一個文本的區(qū)域，通俗來說就是可以一個區(qū)域內(nèi)，可以輸入多行文本，普通的輸入框只能輸入單行文本。文本區(qū)中可容納無限數(shù)量的文本，其中的文本的默認字體是等寬字體。比如網(wǎng)站中的評論、留言等功能都可以使用 textarea 文本域標簽來實現(xiàn)。

1. textarea 文本域標簽的使用

我們直接書寫 textarea 標簽既代表文本域標簽，代碼如下：

<textarea></textarea>

效果如下：

我們可以通過可以通過 COLS 和 ROWS 屬性來規(guī)定 textarea 的尺寸。cols 設置文本域的寬度，rows 設置文本域的高度。代碼如下：

<textarea cols="30" rows="10"></textarea>

效果如下：

需要注意的是，文本域的右下角有一個可以拖拽的區(qū)域，可以通過拖拽來改變文本的寬高，如果想要取消這個功能，需要通過 CSS 樣式來取消。

文本域也可以設置 placeholder 屬性來實現(xiàn)占位符的效果，用法和作用和 input 的 placeholder 屬性一樣。

效果如下：

如果在文本域標簽當中寫入了內(nèi)容，那么這些內(nèi)容會顯示文本域的區(qū)域內(nèi)。代碼如下：

<textarea cols="30" rows="10" placeholder="請輸入內(nèi)容">123456</textarea>

效果如下：

2. 注意事項

1. 文本域可以設置 cols 和 rows 屬性來改變文本域的寬高，不過更好的辦法是使用 CSS 的 height 和 width 屬性;
2. 文本域默認右下角有一個可以拖拽區(qū)域，通常情況下我們不需要這個功能，所以需要借助 CSS 來取消這個功能。

3. 真實案例分享

簡書

<textarea placeholder="寫下你的評論..."></textarea>

慕課網(wǎng)

<textarea placeholder="寫下你對評價的回復..."></textarea>

4. 小結

1. 文本域為雙標簽，如果在文本域的標簽當中寫內(nèi)容，則內(nèi)容會出現(xiàn)在文本域中。
2. 文本域可以通過設置 cols 和 rows 來改變文本域的寬高。
3. 文本域可以設置placeholder 屬性來添加占位符。