欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 input元素范例:email及url先容

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

在前面的博文,我们已经接头了一些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,但深入思索后我认为对付进步用户体验是一个很好的设施,你以为呢? 本文地址:http://itbyc.com/web/html5/13069.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1