H5学习之路之Input类型新特性

input的输入类型在H5之前已经有很多很广泛的使用了，但是H5其实加入了很多新的属性和验证，提供方便的同时给我们开发带来了更多的是安全性的提升，今天我们就简单的说一下H5中新的input属性和用法。

浏览器的支持情况：

（图片摘自W3school）

E-mail: <input type="email" name="user_email" />

当我们使用email的时候，默然会检测到输入的格式是不是正确的，如果是使用的Iphone的时候可以通过触摸屏的键盘来配合他完成@的输入，但是这里需要明确的一点是我测试的时候用的都是谷歌的浏览器，当我用Safari的时候出现了一种很尴尬的情况：

那么我们都知道IE是对H5兼容最差的一款浏览器，那么测试以后我发现效果其实还好吧：

一般我们默认的是火狐是没有问题的：

ok，我在邮箱上面可能分别用了不同的浏览器来实现效果，目的有几个，第一测试一下兼容性怎么样，还有就是看一下H5的实用性是不是说的那么好，现在看来这里还是很不错的，那么下面我们就全部用谷歌来测试一下别的新类型。

URL

Homepage: <input type="url" name="user_url" />

number

Points: <input type="number" name="points" min="1" max="10" />

ps：这里需要说明的是，number的时候提供了一个最大值和最小值的限制条件，可以更好的满足我们做限制的时候的操作。

（图片摘自W3school）

Range

<input type="range" name="points" min="1" max="10" />

ps：这里也是一样的，给定了几个常用的属性：

（图片摘自W3school）

Date

它提供了下面几种常用的类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

我们分别试一下效果：

date：

month：

week：

time：

datetime：

ps：这里我使用的时候出问题了，根本就不可以选择，只是自己输入，而且是没有任何的监听事件的，也就是说您可以输入任意的文本，都是可以验证通过的，我开始怀疑是浏览器不兼容的问题，我尝试使用别的浏览器，但是结果好像是一样的。这里不知道什么原因造成的。

datetime-local：

也是一样的没有给出任何的选择，不知道是什么原因，后期我会更新这块，尽量找到原因。

很大的可能是我操作的姿势不对。

search：

这里就是一个普通的搜索域。没有发现什么特别的地方。

H5学习之路之Input类型新特性相关推荐

H5学习从0到1-H5的新特性（1）
随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言新特性介绍 1.用于回话的canvas标签 2 ...
Java基础学习——第十六章 Java8新特性
Java基础学习--第十六章 Java8 新特性 Java8(JDK8.0)较 JDK7.0 有很多变化或者说是优化,比如 interface 里可以有静态方法和默认方法,并且可以有方法体,这一点就颠 ...
H5学习之路之audio音频播放
为什么突然写这个呢?很简单,H5学习本身应该是一个系统的学习过程,虽然很多的东西都是会的,但是没有总结过,也不知道自己究竟对H5了解多少,爱有多深,所以在这里装作自己好像对H5很了解的样子,写一个记录 ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
input html5 新特性,html5 input 新特性
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 介绍这些新的输入类型: email url number range Date pickers (date, month, ...
零基础学习java------21---------动态代理，java8新特性（lambda, stream,DateApi）
1. 动态代理在一个方法前后加内容,最简单直观的方法就是直接在代码上加内容(如数据库中的事务),但这样写不够灵活,并且代码可维护性差,所以就需要引入动态代理 1.1 静态代理实现在讲动态代理之前, ...
干货！快速上手typescript的学习笔记（对比JS的新特性，环境搭建，webpack配置，ts编译配置）
前提需要有js的基础文章目录 TypeScript 产生背景什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建基本类型编译文件配置 tsconfig ...
Java基础学习总结（55）——java8新特性:stream
java作为开发语言中的元老已经度过了很多年,最新的java8为我们带来了一些新特性,这些特性可以在以后的工作中为我们的开发提供更多的便捷,现在就让我们看看最新的函数式编程风格怎么在实际的开发中使用.
h5学习笔记之表单类型与属性
一.智能表单 required: required 内容不能为空 placeholder: 表单提示信息 autofocus:自动聚焦 pattern: 正则表达式输入的内容必须匹配到指定正则范围 ...

H5学习之路之Input类型新特性

H5学习之路之Input类型新特性相关推荐

最新文章

热门文章