HTML5 input number的神秘面纱
听说过HTML5里的input number吗?其实就是个输入数字的利器。想象下你在网页上点个按钮，那就直接弹出个只显示数字的小键盘。方便省时不用说，这样子的设计也提升了你的输入速度和心情~
number类型的使用技巧
想要网页的input可以直接输数字吗？很简单，给它加上s type=” number”属性就 OK了。用手机点就会自动弹出数字键盘，不用再手动切换了，方便极了。不过，得注意有些安卓机有时候不太听话，可能一不小心就切到符号输入法去了，千万别乱按误入错位字符
记住，要是你用到那个$number$变量，电脑就会自动帮你去掉那些没有+、-或者.的地方，也就是不是数学符号的部分，当作无效处理。这是为啥？因为它聪明呗，懂得那俩符号可是加减号和小数点儿。这样说来，你要是敲进去什么奇奇怪怪的东西，相应的$value$就直接空掉了喔！
HTML5 input type属性值大揭秘
不止数字输入，HTML5里的输入类型还有很多花样！比如，你可以用文本输入来打字；密码输入，就得遮掩起来保护隐私了；还有那个只能选一个的单选按钮和可以选多个的复选框。让input标签变身，只需加个type属性就行。
限制输入范围也是可以滴
对于含有数字的信息，咱们也能给大家定些规则！比如说，确定一个数的最低值、最高值，还有限制每多少个空格才能输入一次。这样就能防止人乱填咯！搞定这个，只用设置min、max和step这几个属性就行了。想要用户从1到100里选数，就设个min=”1″ max=”100″就好！
HTML 5 type属性带来不同体验
你知道吗？type属性不仅能用于数字，其实啥类型都能输进去！像文字密码日期邮箱什么的。这些数据都有独特的显示和操作方式。记得加上去，这样你的代码看起来就更舒服。
丰富表单体验
别以为只是报表里加点料，其实这能变得美观大方，还能提升用户体验！比如说登录时，用户名就用文本框，但密码就用密码框保护起来吧；而选择项目，单选按钮或复选框当然更方便了。这样一来，不仅好看还好使，是不是你也是这么觉得的呀？
First name:
Last name:
总结与展望
看了这个文章，你应该明白啥叫HTML5’sinputnumber跟inputtype。简单说，就是我们做页面时怎么用好输入框，还得学会怎么限制用户的输入以及搞点有意思的交互效果。别小看这些看似不起眼的东西，做对了能让用户好感度飙升噢。以后网络技术越来越牛，相信HTML5的这些功能也会越来越炫酷，让人目不暇接！
大家都说说在做项目时，都是怎么让HTML5 input元素加上数字等类型属性的？有没有遇到过啥奇怪或恼火的状况？
评论0