HTML5新增了很多输入类型

发布日期:2015-09-15 16:41:51
HTML5新增了很多输入类型,它们最大的作用就是可以限制用户输入的数据,不需要引入额外的JavaScript代码。这些新的输入类型最赞的一点,就是在那些不支持新特性的浏览器中,它们会被降级显示为一个标准的文本输入框。此外还有很多很有用的腻子脚本可以让那些老版本浏览器也跟上时代。我们稍后会讲到这些内容,现在先来看看这些新的 HTML5输入类型以及它们所带来的便利。
1. email
type="email" ——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。下面的示例代码中我们将 type="email" 与 'required' 和 'placeholder' 组合起来使用:
<div>
<label for="email">北京网站制作</label>
<input id="email" name="email" type="email"
placeholder="dwight.schultz@gmail.com" required aria-required="true">
</div>
当提交一个不符合格式的输入值时,浏览器会生成警告信息:

此外,许多触摸屏设备(如 Android、iPhone等等)会根据输入类型改变键盘模式。下图显示了 type="email" 的输入框在 iPad上的使用效果。注意看输入键盘上那个方便输入邮箱地址的@符号:

HTML5新增了很多输入类型

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计