马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-2-3 20:08 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
1、type="number"
本节课我们继续学习 input 元素 type 属性的其他值。
总复习参看：关于 input 元素各种类型用法的大大大大大总结
当 type 属性设置为 number 后用于让用户输入一个数字：<input type="number" value="33">
当我们使用正确的 type 值 "number" 创建数字输入时，会自动验证输入的文本是否为数字。
如果不是数字，则无法在该框中成功键入。
右侧也会有一组向上和向下的小箭头。
还可以在此基础上，添加三个属性：min、max、step 来限制数字范围。
min 和 max 指定最大最小值，step 指定步进（调整幅度）。
修改：<input type="number" value="33" min="1" max="100" step="10">
这样指定了最小值为1，最大值100，单击小箭头以10进行上下波动。
但是目前这样是看不到效果，需要提交功能，修改：<form action="#">
<label>年龄：<input type="number" value="33" min="1" max="100" step="10"></label>
<input type="submit">
</form>
这样当输入不符合要求的数字时，会自动弹出警告框。
2、type="range"
如果理解了上面的 number 理解 range 就很简答了。
但设置为 range:<label>年龄：<input type="range" ></label>
此时 input 就化身为一个滚动轴具像化的显示数字。
也可以指定 min、max、step：<form action="#">
<label>年龄：<input type="range" value="1" min="1" max="10000" step="100"></label>
<input type="submit">
</form>
小甲鱼老师课程中将滚动条拉到最后，为什么是9901？
(友情：10000-100+1)
请看本讲课后作业～
3、文本类型
type="email"，让用户输入或编辑一个电子邮箱地址。
此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。
type="tel"，让用户输入和编辑电话号码。
尽管 tel 类型的输入在功能上和 text 输入一致，如此设置还是有用处滴～
其中最明显的就是：
type="url"，让用户输入 URL 字段的表单类型类型。
三个类型，都有一个小尴尬：
正则表达式（Regular Expression），从翻译上看叫“常规表示法”更易于理解。
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
拓展阅读：正则表达式大大大大大全
往往通过 pattern 属性来调用相应的表达式规则。
三个元素都一样，例如我们拿 url 举例：<form action="#">
<input type="url" pattern="^((https|http)?:\/\/)[^\s]+">
<input type="submit">
</form>
当表单提交时，如果输入的 url 不符合规则就会弹出：
我们目前不用了解正则的具体玩法，只需要知道：
后面等我们做到具体案例时再来讲一下，否则没用实际应用场景，学了也会忘哈～
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-1-14 10:33:00
置顶卡
千斤顶
显身卡
发表于 2019-2-21 20:47:31
发表于 2020-2-8 15:50:45
