html5中input元素新特性有哪些-创新互联

这篇文章给大家分享的是有关html5中input元素新特性有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

属性

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

简单描述

新增加的属性描述如下：

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

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

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

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

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

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

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

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

9. max ：设置元素中数字或日期控件的较大值。

10. min ：设置元素中数字或日期控件的最小值。

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

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

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

14. readonly ：设置元素是否只读。

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

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

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

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

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

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

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

示例：

    
验证码：
    

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

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

示例：

姓名：
地址：

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

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

示例：

formaction ：设置表单action属性的值

formenctype ：设置表单enctype属性的值

formmethod ：设置表单method属性的值

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

formnovalidate ：关闭表单的验证。

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

示例：

    
用户名：
    
    

formtarget ：设置表单target属性的值

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

max ：设置元素中数字或日期控件的较大值

min ：设置元素中数字或日期控件的最小值

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

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

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

注意：

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

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

示例：

    
手机号码：
    

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

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

示例：

姓名：

readonly ：设置元素是否只读

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

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

示例：

    
用户名：
    

方法

1. 元素在HTML5中增加了2个与校验相关的方法：

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

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

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

返回值：

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

示例：

HTML：

 网址：

JavaScript：

// 内容为：www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => false ：验证不通过
 
// 内容为：http://www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => true ：验证通过

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

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

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

参数：

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

示例：

HTML：

    
新的密码：
    
确认密码：
    

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('');
    }
}

新的控件

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

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

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

简单介绍

1. 元素type属性的值：

2. color ：颜色控件。<>

3. date ：日期控件。<>

4. email ：电子邮件地址输入框。<>

5. month ：年月日历控件。<>

6. number ：数值输入框。<>

7. range ：滑动条。<>

8. search ：搜索框。<>

9. tel ：电话号码输入框。<>

10. time ：时间控件。<>

11. url ：网址输入框。<>

12. week ：周数控件。<>

type="color" ：颜色控件

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

属性：

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

示例：

 type="date" ：日期控件

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

属性：

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

示例：

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

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

属性：

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

示例：

type="month" ：年月控件

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

属性：

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

示例：

type="number" ：数值输入框

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

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

示例：

type="range" ：滑动条

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

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

示例：

type="search" ：搜索框

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

示例

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

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

示例：

 type="time" ：时间控件

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

属性：

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

示例：

 type="url" ：网址输入框

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

示例：

type="week" ：周数控件

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

属性：

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

示例：

感谢各位的阅读！关于“html5中input元素新特性有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！