HTML5入门

跟KingDZ学HTML5之十:新的input类型2

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

我们继续讲解 这些新增加的 Input 吧。 1tel 这个就简单多了 XML/HTML Code 复制内容到剪贴板 input type = tel value = 1 list = list / datalist id = list option value = 860866679 label = QQ号 / option option value =

 我们继续讲解  这些新增加的 Input 吧。

1>tel

这个就简单多了

1

XML/HTML Code复制内容到剪贴板
  1. <input type="tel" value="1" list="list"/>  
  2.          <datalist id="list">  
  3.              <option value="860866679" label="QQ号"></option>  
  4.              <option value="11222333" label="NO"></option>  
  5.          </datalist>  

呵呵呵,没啥太多个性的东西,直接上代码,和效果了。

2>url

这个,我想看到就知道是什么了吧,URL,网址呗。

url类型的input元素是一种专门用来输入url地址的文本框。

你输入一个不是 URL的字符串,他会在前面自动补充上 http://

2

XML/HTML Code复制内容到剪贴板
  1. <input type="url" placeholder="请输入网址"></input>  

3>email

这个不用说了 邮箱验证。

XML/HTML Code复制内容到剪贴板
  1. <input type="email" name="email"  multiple="multiple"/>  

12

 

好了,下面时间选择器了。

4>date

XML/HTML Code复制内容到剪贴板
  1. <input type="date" max="2012-10-10" min="2001-01-01"  value="2011-01-01" />  

min,最小时间,max,最大时间  value 默认值

好了,看效果吧。

1

5>month

1

XML/HTML Code复制内容到剪贴板
  1. <input type="month" max="2012-10" min="2001-01"  value="2011-01" />  

6>week

XML/HTML Code复制内容到剪贴板
  1. <input type="week" max="2012-W7" min="2001-W1"  value="2011-W2 />  


1

7>time

XML/HTML Code复制内容到剪贴板
  1. <input type="time" max="18:39:57" min="17:49:57"  value="17:49:58" />  

2

8>datetime

C/C++ Code复制内容到剪贴板
  1. <input type="datetime" />  

唯一一个要注意的就是时间是 UTC格式的

2

然后  min  和  max 的格式

1989-01-01T20:20:20Z

一定要主要上面的高亮部分哦。防止和本地时间混淆。

9>datetime-local

和上面的效果差不多,注意没哟 那个UTC

2

还有他的时间格式。

1989-01-01T20:20:20

没有最后的 Z 啊

好了,到现在为止,我们的input标签介绍完了,(*^__^*) 嘻嘻……,希望大家拍砖啊。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 盘点HTML5标签使用的常见误区

    盘点HTML5标签使用的常见误区

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十三:HTML5颜色选择器

    跟KingDZ学HTML5之十三:HTML5颜色选择器

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十二:Form表单元素新增属性

    跟KingDZ学HTML5之十二:Form表单元素新增属性

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十一:表单新元素

    跟KingDZ学HTML5之十一:表单新元素

    2014-11-16 20:49

网友点评
e