在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" 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" 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" required /></p> <input type="submit" /> </form>

 

2. 方法

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

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

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

2.1 详细介绍 1) boolean checkValidity() ：判断控件的内容是否校验通过

返回值：

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

示例：

HTML：

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

JavaScript：