節(jié)課，我們學(xué)習(xí)表單的多行文本框控件。

多行文本框控件，也稱文本域控件。生活中多行文本框隨處可見，例如：在線簡歷中的個人優(yōu)勢區(qū)域；在線問卷調(diào)查中的個人觀點和看法區(qū)域；流調(diào)信息表中的詳細地址，都使用到了多行文本輸入框。

多行文本框相對于單行文本框而言，允許用戶輸入多行文本。文本觸達右側(cè)邊界后會自動折行；文本超出底部邊界后會產(chǎn)生滾動條，可以滾動鼠標(biāo)滾輪查看完整的輸入信息。

在HTML中如何實現(xiàn)多行文本框呢?

可以通過在 form 標(biāo)簽內(nèi)，嵌套 textarea 標(biāo)簽來實現(xiàn)。這里的 text 譯為文本，area譯為區(qū)域，textarea 連起來就是文本域的意思。

textarea 是一個雙標(biāo)簽，基本語法格式為：<textarea>文本</textarea>，文本需要放在標(biāo)簽對內(nèi)部。

打開編輯器，新建一個 textarea.html 文件，自動補全基礎(chǔ)代碼，在 body 標(biāo)簽內(nèi)部編寫一個 form 表單標(biāo)簽，在 form 標(biāo)簽里面添加文本 "請?zhí)顚懺敿毜刂罚?#34; ，緊鄰文本后面添加一個 textarea 標(biāo)簽。保存。

用瀏覽器打開頁面，一個多行文本輸入框就做好了。點擊多行文本輸入框，向里面輸入文本，當(dāng)輸入的文本觸達多行文本框右側(cè)的時候，文本自動換到下一行，一直輸入，文本溢出后，文本框會出現(xiàn)滾動條。窗口太小看不到，也可以鼠標(biāo)拖拽，縮放窗口。

事實上，textarea， 多行文本輸入框，是可以設(shè)置顯示區(qū)域的寬度和高度的。

使用 cols 屬性，cols 是 columns 的縮寫，用來指定一個文本區(qū)的可見寬度，值是個數(shù)字。使用 rows 屬性，用來指定一個文本區(qū)域中的可見行數(shù)，值也是數(shù)字。

回到編輯器，在 textarea 標(biāo)簽上定義 cols 等于 "10" (cols="10") rows 等于 "3" (rows="3")。實現(xiàn)多行文本框的可見大小為 3 行 10 列。保存。

回到瀏覽器，刷新，多行文本輸入框的寬度和高度發(fā)生了改變。向框內(nèi)再次輸入數(shù)字 "0123456789"，當(dāng)你輸入到 9 的時候，你會發(fā)現(xiàn)數(shù)字 9 后面與留白位置還可以繼續(xù)輸入。

不要著急，咱們繼續(xù)輸入，隨著內(nèi)容的不斷增加，行數(shù)也越來越多，同時右側(cè)會隨之會產(chǎn)生一個滾動條，在滾動條產(chǎn)生的那一瞬間，我們發(fā)現(xiàn)，滾動條是占位置的。

雖然通過 cols 和 rows 能控制可見寬高，但在實際開發(fā)項目時，為了美觀和輸入文本的多樣性，一般會通過CSS來控制它的樣式。

文本域標(biāo)簽就介紹完了，大家一起動手實現(xiàn)一個吧。

文章配套視頻「鏈接」

天給大家?guī)淼氖巧炜s的輸入框的動畫。大家可以看到，點擊之后包括用戶名往上推，輸入框進行升高。其實這個在很多地方也可以用到，在實際項目中。長話短說，看代碼區(qū)域。

我用開發(fā)工具是hpdx開發(fā)uni app的，大家應(yīng)該很熟悉了。vivo式組容器，可以看到里面包含了第二層vivo式組容器、important輸入框組件、文本組件，還有一條線。我用i來定義，就是這條線。這里面的有基礎(chǔ)同學(xué)可以知道，如果是真的時候是一個樣式，如果是假的時候另一個樣式互相切換的。

怎么在哪控制？通過input的定義了一下，在這使用type-c進行真假的切換。包括這兩個線條為什么會延伸高度？因為這地方定義了四十四px和二px，遇到真的時候是一種高度，遇到假時候是一種高度，這是動態(tài)的樣式，大家要記住。

css部分其實是很少的，就是靜態(tài)的、固定的。可以看到第一層優(yōu)勢圖容器進行全局的定義，第二層就能相對定位和寬度的設(shè)置。輸入框的樣式進行相對定位，那邊去透明，文字顏色、字體大小等等。這地方也可以輸入文字，對文本也進行了央視的開發(fā)。大家可以看我這注釋，就是很詳細的。

進行線條的定義，就這三部分，大家可以看到，大概思路就這么個思路，大家可以動手去寫一下。

喜歡的同學(xué)可以點贊收藏，想要源代碼的可以找我嘮嗑進行獲取或者點擊下方都行，還是建議大家去動手去寫一下。今天推薦的伸縮版的輸入框的樣式就今天就講到這里，謝謝大家。