欢迎大家来到IT世界,在知识的湖畔探索吧!
“小白，你知道文本框么？”
“知道，就是网页里面输入文字的地方！”
“哦，那你知道表单么？”
“不知道，表单是什么啊？”
“文本框就是一个表单元素，在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成长之路》的动力！
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/18442.html
