HTML5 input元素类型:email及url简介

发布时间:2017-04-10 10:32 来源:互联网 以后栏目:网页设计教程

我们曾经评论辩论了一些HTML5改进的处所,比如placeholder,prefetching和webStorage,下面我要简介的是两个新的input元素类型: email和url。让我们随着代码来看看他们的好处:

 

语法格局:

新的input type属性,将应用 email 或许 url 来替换text:
 

代码以下:

 

<!-- email, 非@ + @ + 非 @ 符号,也能够应用其他的啦,

比如 [a-zA-Z0-9]{3,30}@[a-zA-Z0-9]+w*.(com|cn|org|net) -->

<input type="email" pattern="[^@]*@[^@]*" value="">

<!-- url -->

<input type="url" value="">
 

 

 

应用HTML5所独有的pattern属性域,你可以供给一个正则表达式来验证email和url地址的格局,我们将在另外一篇文章评论辩论这个话题。

 

长处

- 可以定制特别的css款式,input[type=email]

- 可以定制特别的css款式,input[type=url]

- 可以做更多的语义定义

- 移动应用适配性:移动浏览器将会为email和url弹出特别的键盘,不消用户手动切换。

 

最后我很反感添加多余的input type,但深刻思虑后我认为关于进步用户体验是一个很好的举措,你认为呢?

 

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、