<!-- input提示語句 -->
<input type="text" placeholder="請輸入用戶名">
<input type="text" value="請輸入用戶名">

<input type="text" style="width:200px;height:10px;padding: 20px;border: 1px solid #000;line-height: 30px" placeholder="我是test文字">

/* css樣式 */
html,body {
 margin: 0;
 padding: 0;
}
.box-1 {
 margin:40px;
 border: 1px solid #000;
 background: skyblue;
}
.box-2 {
 margin:20px;
 border: 1px solid #000;
 background: skyblue;
}
.in-1{
 display: inline-block;
 width: 200PX;
 height: 100px;
 border: 1px solid red;
 margin: 20px;
 background: yellowgreen;
}
<!-- margin重疊 -->
<div class="box-1">
 <div class="in-1">
 第一個盒子
 </div>
 <div class="in-1">
 第二個盒子
 </div>
</div>
<div class="box-2">
 <div class="in-1">
 第三個盒子
 </div>
 <div class="in-1">
 第四個盒子
 </div>
</div>

<!--注意full-width兼容性很差，一般不使用-->
text-transform: none(默認不改變) | capitalize(首字母大寫) | uppercase(全部大寫) | lowercase(全部小寫) | full-width(全寬度);

<p>tEst enGlish</p>
<p style="text-transform: none">tEst enGlish</p>
<p style="text-transform: capitalize">tEst enGlish</p>
<p style="text-transform: uppercase">tEst enGlish</p>
<p style="text-transform: lowercase">tEst enGlish</p>
<p style="text-transform: full-width">tEst enGlish</p>

節課，我們學習表單的多行文本框控件。

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

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

在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來控制它的樣式。

文本域標簽就介紹完了，大家一起動手實現一個吧。

文章配套視頻「鏈接」

單動畫1

html源碼

<div class="inputBox">
    <input class="effect-1" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

css源碼

inputBox class類用于布局，就是一個input容器，便于觀看，我這里設置每一行分為3個列（可根據自己需求設置）。

.inputBox {
      float: left;
      width: 27.33%;
      margin: 40px 3%;
      position: relative; 
}       

然后為input元素設置一些通用樣式。

input[type="text"]{
    font: 15px/24px "Lato", Arial, sans-serif; 
    color: #333; 
    width: 100%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
}    
:focus{
    outline: none;
}

effect-1 class類就代表這不同的input表單獲取焦點的動畫樣式種類, effect-1就代表第一種，以此類推。

.focus-border是輸入框聚焦后的邊框樣式。它采用絕對單位，位置在輸入框的左下角位置，高度為2像素，開始時寬度被設置為0，不可見。并設置了0.4秒的過渡動畫效果。

當輸入框聚焦時以及在輸入框中有內容時，將.focus-border的寬度設置為100%。

.effect-3{
    border: 0; 
    padding: 7px 0; 
    border-bottom: 1px solid #ccc;
}
.effect-1 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background-color: #3399FF; 
    transition: 0.4s;
}
.effect-1:focus ~ .focus-border{
    width: 100%; 
    transition: 0.4s;
}

表單動畫2

html源碼

<div class="inputBox">
    <input class="effect-2" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

css源碼

.effect-2{
    border: 0; 
    padding: 7px 0; 
    border-bottom: 1px solid #ccc;
}
.effect-2 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 2px; 
    background-color: #3399FF; 
    transition: 0.4s;
}
.effect-2:focus ~ .focus-border{
    width: 100%; 
    transition: 0.4s; 
    left: 0;
}

表單動畫3

html源碼

<div class="inputBox">
    <input class="effect-3" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

css源碼

.effect-3{
    border: 0; 
    padding: 7px 0; 
    border-bottom: 1px solid #ccc;
}
.effect-3 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    z-index: 99;
}
.effect-3 ~ .focus-border:before,
.effect-3 ~ .focus-border:after{
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 100%; 
    background-color: #3399FF; 
    transition: 0.4s;
}
.effect-3 ~ .focus-border:after{
    left: auto; 
    right: 0;
}
.effect-3:focus ~ .focus-border:before,
.effect-3:focus ~ .focus-border:after{
    width: 50%; 
    transition: 0.4s;
}

搬你想搬，蓋你所需，碼字不易，且行且珍惜！