包含html5时间控件的词条

html5新属性

1)email:邮件输入域，在表达提交时提供的邮箱格式验证，并弹出一个提示窗口。

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中书写方式。

案例：

相关问答

Q1: html5 input datetime为什么调不出来日历控件

调不出来是因为有些浏览器不支持datetime这种日历控件，比如chrome。

Datetime 对象是 HTML5 中的新对象。

Datetime 对象表示 HTML input type="datetime" 元素。

注释：Internet Explorer、Firefox 或者 Chrome 不支持 input type="datetime" 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

Q2: input的type为data时,在数据为空的时候会显示成yyyy/mm/日,想要数据为空时直接不显示该怎么办呢?

在js中设置自定义时间到date控件的方法：

1、在html5中定义时间控件

input type="date" id="datePicker"  value=""/

2、编写脚本实现自定义时间的赋值

//创建一个当前日期对象

var now = new Date();

//格式化日，如果小于9，前面补0

var 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);

3、运行结果：

Q3: input标签中,html5新增控件type=time可用来设置什么？

当然是设置时间了：）

就像日期选择器一样，你可以在上边设定时间在其他地方获取设定的值后使用。

Q4: 求一个HTML5日期时间控件。

input type="date"这就会自带日期控件了。。。

HTML5 拥有多个供选择日期和时间的新的输入类型：

date - 选择日、月、年

month - 选择月、年

week - 选择周、年

time - 选择时间（时、分）

datetime - 选择时间、日期、月、年（UTC 时间）

datetime-local - 选择时间、日期、月、年（本地时间）

你可以试试不同类型出来的效果，，

如果想要更好看的，那只能去搞个jquery的日期控件来用了，毕竟做得比较成熟，，

但是个人还是很喜欢html5这个新属性，，一句短短的就搞定了，，

不过有一个不好处就是，不同的浏览器渲染出来的效果有些差别。。。。