整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
節課，我們學習表單的多行文本框控件。
多行文本框控件，也稱文本域控件。生活中多行文本框隨處可見，例如：在線簡歷中的個人優勢區域；在線問卷調查中的個人觀點和看法區域；流調信息表中的詳細地址，都使用到了多行文本輸入框。
多行文本框相對于單行文本框而言，允許用戶輸入多行文本。文本觸達右側邊界后會自動折行；文本超出底部邊界后會產生滾動條，可以滾動鼠標滾輪查看完整的輸入信息。
在HTML中如何實現多行文本框呢?
可以通過在 form 標簽內，嵌套 textarea 標簽來實現。這里的 text 譯為文本，area譯為區域，textarea 連起來就是文本域的意思。
textarea 是一個雙標簽，基本語法格式為：<textarea>文本</textarea>，文本需要放在標簽對內部。
打開編輯器，新建一個 textarea.html 文件，自動補全基礎代碼，在 body 標簽內部編寫一個 form 表單標簽，在 form 標簽里面添加文本 "請填寫詳細地址：" ，緊鄰文本后面添加一個 textarea 標簽。保存。
用瀏覽器打開頁面，一個多行文本輸入框就做好了。點擊多行文本輸入框，向里面輸入文本，當輸入的文本觸達多行文本框右側的時候，文本自動換到下一行，一直輸入，文本溢出后，文本框會出現滾動條。窗口太小看不到，也可以鼠標拖拽，縮放窗口。
事實上，textarea， 多行文本輸入框，是可以設置顯示區域的寬度和高度的。
使用 cols 屬性，cols 是 columns 的縮寫，用來指定一個文本區的可見寬度，值是個數字。使用 rows 屬性，用來指定一個文本區域中的可見行數，值也是數字。
回到編輯器，在 textarea 標簽上定義 cols 等于 "10" (cols="10") rows 等于 "3" (rows="3")。實現多行文本框的可見大小為 3 行 10 列。保存。
回到瀏覽器，刷新，多行文本輸入框的寬度和高度發生了改變。向框內再次輸入數字 "0123456789"，當你輸入到 9 的時候，你會發現數字 9 后面與留白位置還可以繼續輸入。
不要著急，咱們繼續輸入，隨著內容的不斷增加，行數也越來越多，同時右側會隨之會產生一個滾動條，在滾動條產生的那一瞬間，我們發現，滾動條是占位置的。
雖然通過 cols 和 rows 能控制可見寬高，但在實際開發項目時，為了美觀和輸入文本的多樣性，一般會通過CSS來控制它的樣式。
文本域標簽就介紹完了，大家一起動手實現一個吧。
文章配套視頻「鏈接」
題一： 一般在我們的認識里行內元素是不支持寬高的，如果要讓其支持寬高，必須通過css顯示的轉換：display:block;可是所有的行內元素都不支持寬高嗎？其實不然，來看下面的例子：
demo1
demo2
代碼運行后我們發現input和img標簽居然支持寬高，在我們的印象中input和img是行內元素（inline），是不支持寬高的，但是它們卻有點特殊，原來它們是可替換元素！
html中的元素可分為替換元素和不可替換元素，替換元素本身是空元素，是由其屬性來決定的，比如這里的input，通過type屬性就可將其設置為文本框或單選按鈕，img也一樣，通過src元素可以來顯示不同的圖片，常見的有<img>、<input>、<textarea>、<select>，他們和一般的行內元素有區別，行內元素不支持寬高，而它們卻支持width和height屬性，如果沒設置寬高，就顯示默認的大小，比如img，就顯示圖片原來的尺寸。
不可替換元素比較常見，也就是塊級元素(div,p,h1……)或一些行內元素(span,strong,a……)，它們是直接顯示元素內容，比如你什么時候見過div通過type來顯示不同的東西？顯然沒有。
問題二：行內元素除了可替換元素外，比如span元素，一定要display:block;才可以支持寬高嗎？其實也不然。且看下面例子：
或者這樣設置也可以：
顯然我并沒有顯示的設置span元素為block，但是同樣能支持寬高，這里的原因是我css設置了span為position:absolute;或者float:left;讓其具有包裹性，從而支持寬高，所以在你設置元素浮動或者絕對定位的情況下，設置元素display:block;就顯得多余了。
Ps:如果喜歡，那就關注我吧！
天給大家帶來的是伸縮的輸入框的動畫。大家可以看到，點擊之后包括用戶名往上推，輸入框進行升高。其實這個在很多地方也可以用到，在實際項目中。長話短說，看代碼區域。
我用開發工具是hpdx開發uni app的，大家應該很熟悉了。vivo式組容器，可以看到里面包含了第二層vivo式組容器、important輸入框組件、文本組件，還有一條線。我用i來定義，就是這條線。這里面的有基礎同學可以知道，如果是真的時候是一個樣式，如果是假的時候另一個樣式互相切換的。
怎么在哪控制？通過input的定義了一下，在這使用type-c進行真假的切換。包括這兩個線條為什么會延伸高度？因為這地方定義了四十四px和二px，遇到真的時候是一種高度，遇到假時候是一種高度，這是動態的樣式，大家要記住。
css部分其實是很少的，就是靜態的、固定的。可以看到第一層優勢圖容器進行全局的定義，第二層就能相對定位和寬度的設置。輸入框的樣式進行相對定位，那邊去透明，文字顏色、字體大小等等。這地方也可以輸入文字，對文本也進行了央視的開發。大家可以看我這注釋，就是很詳細的。
進行線條的定義，就這三部分，大家可以看到，大概思路就這么個思路，大家可以動手去寫一下。
喜歡的同學可以點贊收藏，想要源代碼的可以找我嘮嗑進行獲取或者點擊下方都行，還是建議大家去動手去寫一下。今天推薦的伸縮版的輸入框的樣式就今天就講到這里，謝謝大家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
