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

目录

1. 属性

2. 方法

3. 新控件

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
菜单加载中...

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

  1. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  2. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  3. HTML5和CSS3新特性一览

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  4. 常用的HTML5、CSS3新特性能力检测写法

    伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...

  5. html4与html5的区别及html5的一些新特性

    区别 1.html5语法的改变 HTML5简化了很多细微的语法,例如: 1.1doctype的声明; html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  6. HTML5的常用新特性你必须知道

    HTML5的常用新特性你必须知道 1 新的 声明 HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 的用处. 不是 HTML ...

  7. HTML5的几大新特性

    为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者 ...

  8. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  9. HTML5 改良的 input 元素的种类

    html5中增加改良的input 元素 . 在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用 ...

随机推荐

  1. python3--删除所有空目录,第一个有实际用处的程序

    #目标:删除所有空文件夹 #逐个判断某目录下所有项目 #若该项目是目录就进入该目录,完成上一步,不是下一个项目 #判断完所有后判断当前目录是否是空目录,是就删除 #需要管理员权限,否则很多目录无权限 ...

  2. codeforces 449B Jzzhu and Cities (Dij+堆优化)

    输入一个无向图<V,E>    V<=1e5, E<=3e5 现在另外给k条边(u=1,v=s[k],w=y[k]) 问在不影响从结点1出发到所有结点的最短路的前提下,最多可以 ...

  3. UVA - 11488 字典树

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  4. 初涉SQL Server性能问题(4/4):列出最耗资源的会话

    在上3篇文章里,我们讨论了列出反映服务器当前状态的不同查询. 初涉SQL Server性能问题(1/4):服务器概况 初涉SQL Server性能问题(2/4):列出等待资源的会话 初涉SQL Ser ...

  5. 树-哈夫曼树(Huffman Tree)

    概述 哈夫曼树:树的带权路径长度达到最小. 构造规则 1. 将w1.w2.-,wn看成是有n 棵树的森林(每棵树仅有一个结点): 2. 在森林中选出根结点的权值最小的两棵树进行合并,作为一棵新树的左. ...

  6. nginx的五种负载算法模式

    nginx 负载均衡5种配置方式 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight  指定轮询几率,weight和访问比率成正比 ...

  7. 你为什么必须(从现在开始就)掌握linux

    写在前面 在我看来,人人都应该学习linux,但这不是本文探讨的重点.本文主要从软件测试人员的角度谈谈学习和掌握linux的重要性.必要性.紧迫性. 另外: 这里所说的linux系统,是unix系统和 ...

  8. jvm垃圾收集器总结jdk1.7

    内存 ● 线程私有:程序计数器,虚拟机栈,本地方法栈 ● 线程共享: 方法区,堆 判断存活算法 ● 引用计数法:无法解决循环引用问题. ● 可达性分析算法: 从GCRoot作为起始点,向下搜索,经过的 ...

  9. Java环境变量PATH和CLASSPATH

    Java开发中常用到环境变量的配置,下面简单介绍下Java中经常配置的环境变量:PATH和CLASSPATH. 1.PATH环境变量 1.1 作用简介 安装完JDK(Java Development ...

  10. CentOS 6.5自动化运维之基于cobbler服务的自动化安装操作系统详解

    一.Cobbler安装 前提:cobbler由epel源提供,故此需要事先配置指向epel的yum源方可进行类似下面的安装过程. # yum install -y epel-release # yum ...