“小白，你知道文本框么？”
“知道，就是网页里面输入文字的地方！”
“哦，那你知道表单么？”
“不知道，表单是什么啊？”
“文本框就是一个表单元素，在HTML语言里面表单主要用来收集用户输入。比如文本框、单选框、复选框等等。其他的表单你目前学了也用不到，文本框是表单中最重要的一个，今天咱聊一聊文本框吧，文本框以后会成为你练习的常用元素。”
“首先文本框是一个行内元素，行内元素跟块级元素不同之处在于它前后没有换行。现在我们在一个div中写上几个文字再放一个文本框看看它的效果”
“input标签的type为text的时候它就是一个文本框，这里的type还可以换成password密码文本框、tel电话文本框(tel类型的文本框在手机上获得焦点进行输入的时候，默认弹出的拨号键盘，对于输入数字非常方便)。在input上给它一个id属性，方便我们通过jQuery进行操作，placeholder是文本框提示文字的属性。”
小白看了这个文本框说道：“文本框可以通过css更改样式么？看着好丑啊~”
“当然可以了！对于文本框的样式我们注意两点，一个文本框文字大小(font-size)，一个是文本框的内间距(padding)，这两个属性对文本框的视觉舒适度起很大作用。注意：input不会继承父容器设定的文本大小，因此我们需要针对input单独设定他的文本大小。”
“小白，你知道黄金分割定律么？”
“知道啊！0.618。怎么了？”
“嗯！如果你的文本大小是14像素，你就用14*0.618四舍五入取整，得到的结果设定为文本框的padding，这样看起来文本框会很舒服，比如文本大小是20个像素，20*0.618=12.36~12。所以padding设置成12px，就是这个样子！”
“如果美工给你提供一个文本框样式，你一定要按照美工的样式去设计，这时候就需要用到css控制样式了，你对照css样式表自己调试就可以了，比如我随便设定一个样式：”
“说完样式，我们还得提jQuery对文本框的值操作。jQuery对文本框的值操作用到的是val方法。比如我现在要获取id为username的文本框的值可以这样来获取：”
“通过jQuery改变文本框的值通过val传递字符串参数就可以了：$("#username").val("新的名字");”
“小白，jQuery对文本框的操作除了val之外，也可以通过jQuery更改文本框的样式。当然还有鼠标事件、焦点事件、文本内容发生变化等事件，这些你有时间可以自己练习练习，如果没时间咱后面再专门做讨论，今天就这样吧！”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
