整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          零基礎(chǔ)教你學(xué)前端-29、多行文本框

          節(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)一個吧。

          文章配套視頻「鏈接」

          題一: 一般在我們的認識里行內(nèi)元素是不支持寬高的,如果要讓其支持寬高,必須通過css顯示的轉(zhuǎn)換:display:block;可是所有的行內(nèi)元素都不支持寬高嗎?其實不然,來看下面的例子:

          demo1

          demo2

          代碼運行后我們發(fā)現(xiàn)input和img標(biāo)簽居然支持寬高,在我們的印象中input和img是行內(nèi)元素(inline),是不支持寬高的,但是它們卻有點特殊,原來它們是可替換元素!

          html中的元素可分為替換元素和不可替換元素,替換元素本身是空元素,是由其屬性來決定的,比如這里的input,通過type屬性就可將其設(shè)置為文本框或單選按鈕,img也一樣,通過src元素可以來顯示不同的圖片,常見的有<img>、<input>、<textarea>、<select>,他們和一般的行內(nèi)元素有區(qū)別,行內(nèi)元素不支持寬高,而它們卻支持width和height屬性,如果沒設(shè)置寬高,就顯示默認的大小,比如img,就顯示圖片原來的尺寸。

          不可替換元素比較常見,也就是塊級元素(div,p,h1……)或一些行內(nèi)元素(span,strong,a……),它們是直接顯示元素內(nèi)容,比如你什么時候見過div通過type來顯示不同的東西?顯然沒有。


          問題二:行內(nèi)元素除了可替換元素外,比如span元素,一定要display:block;才可以支持寬高嗎?其實也不然。且看下面例子:

          或者這樣設(shè)置也可以:

          顯然我并沒有顯示的設(shè)置span元素為block,但是同樣能支持寬高,這里的原因是我css設(shè)置了span為position:absolute;或者float:left;讓其具有包裹性,從而支持寬高,所以在你設(shè)置元素浮動或者絕對定位的情況下,設(shè)置元素display:block;就顯得多余了。


          Ps:如果喜歡,那就關(guā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é)可以點贊收藏,想要源代碼的可以找我嘮嗑進行獲取或者點擊下方都行,還是建議大家去動手去寫一下。今天推薦的伸縮版的輸入框的樣式就今天就講到這里,謝謝大家。


          主站蜘蛛池模板: 中文字幕一区视频| 精品一区二区三区色花堂| 色狠狠AV一区二区三区| 日韩内射美女人妻一区二区三区| 人妻少妇AV无码一区二区| 免费播放一区二区三区| 久久人妻无码一区二区| 精品一区二区三区在线观看l | 国产乱码精品一区二区三区中文| 免费看一区二区三区四区| 亚洲午夜一区二区电影院| 日韩一区在线视频| 国产在线精品一区二区在线观看| 精品国产一区二区三区色欲| 国产伦精品一区二区三区免费下载 | 亚洲一区免费视频| 精品女同一区二区三区免费播放 | 久久精品国产一区二区三区 | 日韩精品免费一区二区三区| 国产日韩AV免费无码一区二区三区| 亚洲国产精品一区二区久久hs| 日韩精品人妻一区二区三区四区| 精品国产一区二区三区在线观看| 国产福利一区二区三区在线观看| 国产伦精品一区二区三区精品| 国产激情视频一区二区三区| 国产精品视频免费一区二区三区| 蜜桃传媒视频麻豆第一区| 国产大秀视频一区二区三区| 久久一本一区二区三区| 视频一区二区在线观看| 国产成人久久精品区一区二区| 日本一区二区三区在线网 | 亚洲宅男精品一区在线观看| 久久无码精品一区二区三区| 日韩成人无码一区二区三区| 国产成人精品无码一区二区| 色一乱一伦一区一直爽| 亚洲一区二区三区成人网站 | 99久久精品午夜一区二区| 中文字幕在线观看一区二区三区|