HTML5 input 类型: email及url
原文地址:HTML5′s “email” and “url” Input Types
原文日期: 2010年09月15日
翻译日期: 2013年08月13日
在前面的博文,我们已经讨论了一些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,但深入思考后我觉得对于提高用户体验是一个很好的举措,你认为呢?
HTML5 input 类型: email及url的更多相关文章
- 使用 HTML5 input 类型提升移动端输入体验
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
- 使用 HTML5 input 类型提升移动端输入体验(转翻译)
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- HTML5 Input 类型
浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No numb ...
- HTML/HTML5 Input类型&&表单
1.HTML 中"不常用"input类型中的属性值: disabled:输入字段禁用: maxlength:输入字段的最大字符长度: readonly:输入字符只读,无法修改: s ...
- 使用MUI的日期控件引起的探索——HTML5 input类型date属性
我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...
- Html5学习3(拖放、Video(视频)、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week ))
1.Html拖放 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
- Html5学习进阶三 Input 类型
HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range Date ...
随机推荐
- Intellij Error:Cannot build Artifact 'XXX:war exploded' because it is included into a circular dependency
外网的流程是这样的. 1: 2: 3: 4: 基本按这个来就好了 如果到了build artfact哪里按钮是灰色 就要手动建了 https://jingyan.baidu.com/album/0a5 ...
- ConcurrentHashMap1.7和1.8的不同实现
ConcurrentHashMap 在多线程环境下,使用HashMap进行put操作时存在丢失数据的情况,为了避免这种bug的隐患,强烈建议使用ConcurrentHashMap代替HashMap,为 ...
- FastReport报表MVC显示步骤
FastReport报表MVC使用步骤如下: 1.创建MVC网站项目 最终DEMO如下图所示 2.引用相关DLL FastReport.dll FastReport.Web.dll 3.Web.con ...
- solr服务器搭建
百度百科定义:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Ht ...
- JS实现2048代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Hibernate异常之关键字错误
三月 08, 2018 7:50:25 下午 org.hibernate.tool.schema.internal.ExceptionHandlerLoggedImpl handleException ...
- PHP 完整表单实例
PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website. 在评论 ...
- 线程停止与volatile
1.使用标志位停止线程 在Java中希望停止线程,可以使用设置标志位的方法,如下例所示: class SimpleTask implements Runnable{ private boolean s ...
- Bootstrap3 表格-条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式. 跨浏览器兼容性 条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explo ...
- 负载均衡LVS(DR模式)安装实战
1.编译安装ipvsadm 首先从LVS官网下载tarball,解压后make && make install即可. 要注意的是LVS的依赖有:popt-static.libnl.ke ...