021 - 无敌是多么寂寞（IV）
本帖最后由 不二如是 于 2019-2-3 20:08 编辑上一集：020 - 无敌是多么寂寞（III）
http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg
万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
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 输入一致，如此设置还是有用处滴～
其中最明显的就是：
**** Hidden Message *****
type="url"，让用户输入 URL 字段的表单类型类型。
三个类型，都有一个小尴尬：
不配合正则表达式，都形同鸡肋
正则表达式（Regular Expression），从翻译上看叫“常规表示法”更易于理解。
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
拓展阅读：正则表达式大大大大大全
往往通过 pattern 属性来调用相应的表达式规则。
三个元素都一样，例如我们拿 url 举例：
<form action="#">
<input type="url" pattern="^((https|http)?:\/\/)[^\s]+">
<input type="submit">
</form>
当表单提交时，如果输入的 url 不符合规则就会弹出：
我们目前不用了解正则的具体玩法，只需要知道：
作文本类型筛查，要用到正则表达式即可。
后面等我们做到具体案例时再来讲一下，否则没用实际应用场景，学了也会忘哈～
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：022 - 无敌是多么寂寞（V）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
我来啦 i wanna know
i wanna know
{:10_277:} a {:5_95:} {:5_102:} {:5_102:} 88888888888888888888888888888888888888 {:10_277:} 1 为什么每个都有怕爬虫？ 继续 学习学习
不二真帅
路过，看看！ 1 {:5_105:} 1
页:
[1]
2