web开发第21课

限定数字输入：number

<!--实现数字输入--><label>菇凉，不知今年芳龄如何：<input type="number" name="age"></label>

虽然限制了数字输入，但并没有限制正负，所以为了避免图上情况出现就需要运用到如下限定属性

---

限定数字输入范围：min，max和step

• min限制数字输入框最小值
• max限定数字输入框最大值
• step每一次步进调整的幅度,及最小跨度

<!--限定数字输入范围--><label>菇凉，不知今年芳龄几何：<input type="number" name="age" min="1" max="100" step="1"/></label>

---

数值滚动条：range

 <!-- input实现数值滚动条 -->

        <label>你问我爱你有多深，我爱你有<input type="range" name="love" value="1" min="1" 
max="10000" step="100">分</label>

数值拉倒最大没显示一万而是显示9901是因为我们设置了min=1，而step=100，9901到10000不足100跨度

---

邮箱，电话和网址：email，tel和url

限制输入的形式，使网页仅接收有效的邮箱电话和网址

<!-- input获取邮箱、电话和网址 -->

        <label>邮箱：<input type="email" name="email"></label>

        <br /><br />

        <label>电话：<input type="tel" name="tel"></label>

        <br /><br />

        <label>网址：<input type="url" name="url"></label>

        <br /><br />

电话不对依然提交成功是因为数据检查功能是HTML5里新增的特性，各个浏览器支持还不是很到位

---

要想成功提交就需要html属性新元素
pattern属性
正则表达式

<label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)"></label>
        <br data-tomark-pass><br data-tomark-pass>        <label>电话：<input type="tel" name="tel" pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}"></label>
        <br data-tomark-pass><br data-tomark-pass>        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+"></label>
        <br data-tomark-pass><br data-tomark-pass>

正则表达式常用大全