　　在HTML5中，<input>元素增加了许多新的属性、方法及控件。本文章分别对这三方面进行介绍。

1. 属性

<input>元素在HTML5中新增加的属性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。

1.1 简单描述

新增加的属性描述如下：

autocomplete ：是否显示与现在输入内容相匹配的历史输入记录。<详细介绍>

autofocus ：当页面加载完成后，此元素获得焦点。<详细介绍>

form ：设置元素归属表单的ID。<详细介绍>

formaction ：设置表单action属性的值。<详细介绍>

formenctype ：设置表单enctype属性的值。<详细介绍>

formmethod ：设置表单method属性的值。<详细介绍>

formnovalidate ：关闭表单的验证。<详细介绍>

formtarget ：设置表单target属性的值。<详细介绍>

max ：设置<input>元素中数字或日期控件的最大值。<详细介绍>

min ：设置<input>元素中数字或日期控件的最小值。<详细介绍>

minlength ：设置文本输入控件的内容最小长度。<详细介绍>

pattern ：设置元素文本内容需匹配的正则表达式。<详细介绍>

placeholder ：设置文本控件的预先显示内容。<详细介绍>

readonly ：设置元素是否只读。<详细介绍>

required ：设置控件是否为必填项。<详细介绍>

1.2 详细介绍

1) autocomplete ：是否显示与现在输入内容相匹配的历史输入记录

说明：设置当前文本元素中是否显示与现在内容相匹配的历史输入记录。

场景：搜索框需要此属性，而验证码就不需要。

可设置的值：只可以设置on、off两个值。

　　autocomplete="on" ：显示匹配的历史输入记录。

　　autocomplete="off" ：不显示匹配的历史输入记录。

示例：

<form action="#" >

    <p>验证码：<input type="text" autocomplete="off" /></p>

    <input type="submit" />

</form>

2) autofocus ：当页面加载完成后，此元素获得焦点

说明：若页面中有多个元素含有此属性，只会最前面的元素获得焦点。

示例：

<p>姓名：<input type="text" placeholder="请输入真实姓名" /></p>

<p>地址：<input type="text" autofocus /></p>

3) form ：设置元素归属表单的ID

说明：若元素不在表单标签里，可设置此值为需要归属的表单ID。

示例：

<input type="text" form="register_form" />

4) formaction ：设置表单action属性的值

5) formenctype ：设置表单enctype属性的值

6) formmethod ：设置表单method属性的值

说明：可设置的值为post、get等。

7) formnovalidate ：关闭表单的验证。

说明：可应用于类似【暂存】操作。

示例：

<form action="#"  >

    <p>用户名：<input type="text" name="loginName" required /></p>

    <input type="button" value="暂存" formnovalidate />

    <input type="submit" />

</form>

8) formtarget ：设置表单target属性的值

说明：可设置的值为_self、_blank、_parent、_top等。

9) max ：设置<input>元素中数字或日期控件的最大值

10) min ：设置<input>元素中数字或日期控件的最小值

11) minlength ：设置文本输入控件的内容最小长度

12) pattern ：设置元素文本内容需匹配的正则表达式

说明：元素文本内容指定的正则表达式完全匹配才会验证通过。

注意：

1) 浏览器不会验证空值，若想必填可加上 required 属性。

2) 若含有title属性的值，当匹配失败会显示title的信息。

示例：

<form action="#"  >

    <p>手机号码：<input type="text" name="phoneNumber" pattern="[1]([3]|[5])[0-9]{9}" title="13或15开头的手机号码" /></p>

    <input type="submit" />

</form>

13) placeholder ：设置文本控件的预先显示内容

说明：只有文档内容为空才会显示此属性设定的值。

示例：

姓名：<input type="text" placeholder="请输入真实姓名" />

14) readonly ：设置元素是否只读

15) required ：设置控件是否为必填项

说明：当提交表单时，才会验证此元素是否填写，若没有填写，将显示警告信息并取消提交操作。

示例：

<form action="#" >

    <p>用户名：<input type="text" name="loginName" required /></p>

    <input type="submit" />

</form>

2. 方法

<input>元素在HTML5中增加了2个与校验相关的方法：

checkValidity() ：判断控件的内容是否校验通过。

setCustomValidity() ：设置校验不通过时的自定义信息。

2.1 详细介绍

1) boolean checkValidity() ：判断控件的内容是否校验通过

返回值：

{boolean} 返回一个boolean值表示控件内容是否校验通过。

示例：

HTML：

网址：<input type="url" id="webURL" />

JavaScript：

// 内容为：www.cnblogs.com/polk6

console.log(document.getElementById('webURL').checkValidity()); // => false ：验证不通过

// 内容为：http://www.cnblogs.com/polk6

console.log(document.getElementById('webURL').checkValidity()); // => true ：验证通过

2) void setCustomValidity(string msg) ：设置校验不通过时的自定义信息

说明：在此元素上弹出一个警告框，显示自定义信息。

注意：只有表单验证时才会显示自定义的警告信息。

参数：

msg {string} ：设置需要显示的信息。若为空值，将关闭警告框。

示例：

HTML：

<form>

    <p>新的密码：<input type="password" id="newPwd" oninput="validityPwd()" required /></p>

    <p>确认密码：<input type="password" id="newPwdConfirm" oninput="validityPwd()"  /></p>

    <input type="submit" />

</form>

JavaScript：

// 校验2个密码是否一致

var validityPwd = function(){

    var newPwd = document.getElementById('newPwd');

    var newPwdConfirm = document.getElementById('newPwdConfirm');

    if(newPwd.value != newPwdConfirm.value){

        newPwdConfirm.setCustomValidity('两次密码输入不一致');

    }else{

        newPwdConfirm.setCustomValidity('');

    }

}

3. 新的控件

<input>元素的type属性的值，决定了<input>元素显示什么控件。

HTML5中，给<input>增加了许多新的控件，如color、date、email、month、number、range、search、tel、time、url、week等等。

若浏览器不支持新的控件，将默认以文本框展示(type="text")。

2.1 简单介绍

<input>元素type属性的值：

color ：颜色控件。<详细介绍>

date ：日期控件。<详细介绍>

email ：电子邮件地址输入框。<详细介绍>

month ：年月日历控件。<详细介绍>

number ：数值输入框。<详细介绍>

range ：滑动条。<详细介绍>

search ：搜索框。<详细介绍>

tel ：电话号码输入框。<详细介绍>

time ：时间控件。<详细介绍>

url ：网址输入框。<详细介绍>

week ：周数控件。<详细介绍>

2.2 详细介绍

1) type="color" ：颜色控件

说明：显示一个颜色控件，点击选中需要的颜色。

属性：

value {string} ：设置或获取颜色控件的值，值的格式要为："#rrggbb"。

示例：

<input type="color" />

2) type="date" ：日期控件

说明：显示一个日期控件，提供年月日的选择或自行输入。

属性：

value {string} ：设置或获取日期控件的值，值的格式要为："yyyy-MM-dd"。

示例：

<input type="date" value="2016-04-29" />

3) type="email" ：电子邮件地址输入框

说明：显示一个只能输入电子邮件格式的输入框。

属性：

multiple ：添加此属性后支持输入多个电子邮件地址，必须以','逗号隔开。

示例：

<input type="email" multiple />

4) type="month" ：年月控件

说明：提供一个只能选择年、月的日历控件。

属性：

value {string} ：设置或获取控件的值，值的格式要为："yyyy-MM"。

示例：

<input type="month" value="2016-04" />

5) type="number" ：数值输入框

说明：只能输入数值相关字符，如数字、.(小数点)、-(负号)等。

属性：max表示数值最大值；min表示数值最小值；step表示微调按钮每次跳动的大小。

示例：

<input type="number" value="11.5" />

6) type="range" ：滑动条

说明：以滑动条的形式表示数值。

属性：max表示数值最大值；min表示数值最小值。

示例：

<input type="range" max="100" min="0" value="80" />

7) type="search" ：搜索框

说明：在Chrome中搜索框没内容时就像普通的文本输入框，当有内容时右边有个'x'符号，用以清除文本内容。

示例：

<input type="search" />

8) type="tel" ：电话号码输入框

说明：电话号码的格式非常多，可包含数字、横线、括号等。浏览器并没有制定电话号码格式，只是在移动端浏览器使用时默认显示数字键盘。

示例：

<input type="tel" />

9) type="time" ：时间控件

说明：显示一个时间控件，提供时间的选择或自行输入。

属性：

value {string} ：设置或获取时间控件的值，值的格式要为："HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。

示例：

<input type="time" value="12:30" />

10) type="url" ：网址输入框

说明：输入的网址要加上协议前缀；如http://、https:// 等。

示例：

<input type="url" />

11) type="week" ：周数控件

说明：显示一个可选择年数、周数的日历控件。

属性：

value {string} ：设置或获取周数控件的值，值的格式要为："yyyy-Www"。(格式中的W字符不能省略，并且ww周数要为2位数)

示例：

<input type="week" value="2016-W01"/>

End

Web开发之路系列文章

菜单加载中...

HTML5 input元素新的特性的更多相关文章

html5 新增元素以及css3新特性
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
HTML5的表单input元素的新属性
知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...
HTML5和CSS3新特性一览
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
常用的HTML5、CSS3新特性能力检测写法
伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...
html4与html5的区别及html5的一些新特性
区别 1.html5语法的改变 HTML5简化了很多细微的语法,例如: 1.1doctype的声明; html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
HTML5的常用新特性你必须知道
HTML5的常用新特性你必须知道 1 新的声明 HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是的用处. 不是 HTML ...
HTML5的几大新特性
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者 ...
HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

随机推荐

【分享】标准springMVC+mybatis项目maven搭建最精简教程
文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...
实现代理设置proxy
用户在哪些情况下是需要设置网络代理呢? 1. 内网上不了外网,需要连接能上外网的内网电脑做代理,就能上外网:多个电脑共享上外网,就要用代理: 2.有些网页被封,通过国外的代理就能看到这被封的网站:3. ...
利用XAG在RAC环境下实现GoldenGate自动Failover
概述在RAC环境下配置OGG,要想实现RAC节点故障时,OGG能自动的failover到正常节点,要保证两点: 1. OGG的checkpoint,trail,BR文件放置在共享的集群文件系统上,R ...
引人瞩目的 CSS 变量（CSS Variable）
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
IOS FMDB 获取数据库表和表中的数据
ios开发中,经常会用到数据库sqlite的知识,除了增,删,改,查之外,我们说说如何获取数据库中有多少表和表相关的内容. 前言跟数据库使用相关的一般的增删改查的语句,这里就不做解释了.在网上有很多 ...
PHP代码优化
1 代码优化 1 尽量静态化如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和 ...
JS魔法堂:不完全国际化&本地化手册之理論篇
前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
Missing Push Notification Entitlement 问题
最近打包上传是遇到一个问题: 描述: Missing Push Notification Entitlement - Your app includes an API for Apple's Push ...
CentOS：设置系统级代理（转）
原文地址:http://www.cnblogs.com/cocowool/archive/2012/07/05/2578487.html YUM代理设置编辑/etc/yum.conf,在最后加入 # ...
Centos 7 vsftpd ldap 配置
#ldap 安裝配置环境Centos7#安装 yum install -y openldap openldap-clients openldap-servers migrationtools pam ...

HTML5 input元素新的特性

目录