1)email:邮件输入域,在表达提交时提供的邮箱格式验证,并弹出一个提示窗口。
创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,网站设计制作、成都做网站,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为成百上千服务,创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!
2)url:地址输入域,在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口。
3)number:数字输入域,(可设置min、max、step)。
4)tel:电话号码输入域,在手机浏览器弹出数字输入域。
5)search:搜索输入域,在手机浏览器右下角呈现搜索按键。
6)range:范围选择空件。
7)color:颜色选择控件。
8)date/month/week:时间选择控件。
1)autocomplete: autocomplete属性规定输入的字段是否应该启用自动完成功能。
自动完成功能允许浏览器预测 字段输入,当用户在字段开始键入时,浏览器基于键入的值。应该显示出在字段中填写的选项。
2)placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交。
3)autofoaus:自动获取输入焦点。
4)multiple:是否允许多个输入值,若声明该属性,那么输入框允许输入多个用逗号隔开的值。
5)form:值为某个表单的id,若设置,则该输入域可放在该表单外面。
6)required:在表单提交时会验证是否有输入,没有则弹出提示信息。
7)maxlength:限制最大长度,只有在有输入的情况下才有用,不区分中英文。
minlength:限制最小长度,但它不是H5标准属性,仅部分浏览器支持。
8)min:限定输入数字的最小值。
9)max:限定输入数字的最大值。
10)step:限定输入数字的步长,与min连用。
11)pattern:指定一个正则表达式,对输入进行验证。(正则默认首尾加^$)
作用:getCurrentPosition() 方法来获得用户的位置。
格式:一般在js中书写方式。
案例:
表单中新增的控件(type属性)
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件(UTC时间)
datetime-local: 年-月-日 时:分 格式的控件(本地时间)
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
input type="number" name="" id="" value="60" max="100" min="0" /
range: 选择区域
input type="range" name="" id="" value="60" max="100" min="0" /
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
新增控件属性:
placeholder: 占位符,输入框提示信息
input type="text" autofocus placeholder=''/
required: 该input为必填项
autofocus: 在页面加载时,域自动地获得焦点
autocomplete="off/on":可以记录输入信息
必须有name属性 必须提交过
off==关闭 on==打开
input type="tel" name="user" id="" value="" autocomplete="on"/
pattern: 正则验证
input type="tel" pattern="[0-9]{7,12}"/
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型,每次递增step的值
list: 指定一个datalist,作为下拉提示单
调不出来是因为有些浏览器不支持datetime这种日历控件,比如chrome。
Datetime 对象是 HTML5 中的新对象。
Datetime 对象表示 HTML input type="datetime" 元素。
注释:Internet Explorer、Firefox 或者 Chrome 不支持 input type="datetime" 元素,Safari 中部分支持。Opera 12 以及更早的版本中完全支持。
H5edu教育html5开发为您解答:
Input
类型
-
Date
Pickers(日期选择器)
HTML5
拥有多个可供选取日期和时间的新输入类型:
date
-
选取日、月、年
month
-
选取月、年
week
-
选取周和年
time
-
选取时间(小时和分钟)
datetime
-
选取时间、日、月、年(UTC
时间)
datetime-local
-
选取时间、日、月、年(本地时间)
Date:
input type="date"这就会自带日期控件了。。。
HTML5 拥有多个供选择日期和时间的新的输入类型:
date - 选择日、月、年
month - 选择月、年
week - 选择周、年
time - 选择时间(时、分)
datetime - 选择时间、日期、月、年(UTC 时间)
datetime-local - 选择时间、日期、月、年(本地时间)
你可以试试不同类型出来的效果,,
如果想要更好看的,那只能去搞个jquery的日期控件来用了,毕竟做得比较成熟,,
但是个人还是很喜欢html5这个新属性,,一句短短的就搞定了,,
不过有一个不好处就是,不同的浏览器渲染出来的效果有些差别。。。。
在js中设置自定义时间到date控件的方法:
1、在html5中定义时间控件
input type="date" id="datePicker" value=""/
2、编写脚本实现自定义时间的赋值
//创建一个当前日期对象
var now = new Date();
//格式化日,如果小于9,前面补0var day = ("0" + now.getDate()).slice(-2);
//格式化月,如果小于9,前面补0
var month = ("0" + (now.getMonth() + 1)).slice(-2);
//拼装完整日期格式var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
//完成赋值$('#datePicker').val(today);