HTML5新增的表单类型

整理时间：2017-10-4 整理人：info#haixia.net(将#替换成@，来信必复)

序号	属性名称	描述
1	number	仅限数值型数据，可设置区间范围与步长增量
2	date	仅限日期型数据，可设置区间范围与步长增量
3	time	仅限时间型数据，可设置区间范围与步长增量
4	email	限定必须输入电子邮箱地址。如@
5	search	不限定内容，当有内容时，控件尾部有一个取消符号
6	url	限定必须是以http://或https://开头的合法的url地址
7	color	自动打开系统的色板或拾色器，进行颜色选择

1、number:仅限数值型数据

<input type="number" name="age" min="18" max="120" step="5">

2、date:仅限日期型数据

<input type="date" min="2014-10-10" max="2018-10-20" value="2017-03-08">

3、time:仅限时间型数据，仅允许设置小时区间，分钟供参考

<input type="time" name="time" min="10:10" max="14:20" value="10:20">

4、email:仅限电邮地址

<input type="email" name="email" placeholder="yourname@mail.com">

5、search:有内容时，会显示一个取消图标

<input type="search" placeholder="请输入查询关键字">

6、url:仅限以http://或者https://开头的url地址

<input type="url" name="url" placeholder="请输入以http://或https://起始的完整网址" size="40">

7、color:通过系统调色板来获取颜色，返回16进制颜色值

<form action="" method="get">
<input type="color" name="color" id="color">
<input type="button" value="获取颜色值" id="btn">
<input type="text" name="color_value" id="color_value">
</form>
<script>
document.getElementById('btn').onclick=function(){
document.getElementById('color_value').value=document.getElementById('color').value;
}
</script>

转载于:https://www.cnblogs.com/haixianet/p/7625187.html

HTML5新增的表单类型相关推荐

HTML5新增input表单（HTML5）
HTML5新增input表单(HTML5) <!DOCTYPE html> <html lang="en"><head><meta cha ...
HTML5新增的表单事件:oninput、onkeyup、oninvalid
HTML5新增的表单事件:oninput.onkeyup.oninvali 1:oninput 监听当前指定元素内容的改变:只要内容改变(添加元素,删除元素),就会触发这个事件 2:onkeyup 键 ...
表单类型多媒体与css3初始
HTML5新增了表单的输入类型 .email 输入email格式,email 类型用于应该包含 e-mail 地址的输入域. 在提交表单时,会自动验证 email 域的值是否合法有效: <for ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
HTML5中将中文表单验证默认提示语句改为英文！
js代码: function checkEmail(){var email=document.getElementById("eject_email");if(email.valu ...
HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折前言一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...
智能表单的应用和新增的表单属性
1.智能表单的使用和规范: Input表单的type新属性值 type="email" 限制用户输入必须为Email类型 type="url" 限制用户输入必须 ...
HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)
3. 智能表单 3.1. 新的表单类型 email - 限定输入内容为邮箱地址,表单提交时会校验格式 url - 限定输入内容为URL,表单提交时会校验格式 number - 限定输入内容为数字,表单 ...
Html5中新增的表单元素详解
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. •datalist •keygen •output datalist 元素 datalist 元素规定输入域的选项列表.列表是 ...

HTML5新增的表单类型

HTML5新增的表单类型

HTML5新增的表单类型相关推荐

最新文章

热门文章