<!-- 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;
}

搬你想搬，盖你所需，码字不易，且行且珍惜！