- email输入类型:
<input type="email" name="email" />
要求输入格式正确的 email 地址,否则浏览器不允许提交,同时会提示错误信息
- url输入类型:
<input type="url" />
要求输入格式正确的 URL 地址,Opera 中会自动在开始处添加 http://
- 日期时间相关输入类型:
<input type="date" />
<input type="time" />
<input type="month" />
<input type="week" />
目前 MS 只有 Opera/Chrome 新版本支持,且展示效果也不一样
- number输入类型:
<input type="number" />
要求输入格式正确的数字
- range类型:
<input type="range" step="2" min="0" max="10" value="2" />
显示一个可拖动的滑块条,通过设定 max/min/step 值限定拖动范围,拖动时会反馈给value一个值
- search输入类型:
<input type="search" />
输入一个搜索关键字,通过 results=s 可显示一个搜索小图标
- tel输入类型:
<input type="tel" />
要求输入一个电话号码,但实际上并没有特殊的验证,与 text 类型没什么区别
- color输入类型:
<input type="color" />
可让用户通过颜色选择器选择一个颜色值,并反馈到value
-
placeholder属性:
<input type="text" placeholder="点击我会清除" />
-
实现点击清除表单初始值,MS 除了 Firefox,其他标 准浏览器都能很好的支持
- require/pattern属性:
<input type="text" name="require" required="" />
<input type="text" name="require1" required="required" />
<input type="text" name="require2" pattern="^[1-9]\d{5}$" />
表单验证属性require 类型时,若输入值为空,则拒绝提交并出现提示,注意在 Opera 中必须指定 name 值,否则无效果
HTML5新增3和表单初级验证方法
最新推荐文章于 2024-08-24 14:51:38 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)