HTML5-新增表单input属性

新增表单属性

form控件主要新增的属性:

• autocomplete 是否启用表单的自动完成功能，取值：on（默认）、off

• novalidate 提交表单时不进行校验，默认会进行表单校验

autocomplete属性

概念：autocomplete属性规定input 控件是否启用自动完成功能

语法：

属性值：

• on：默认值。表示开启，浏览器会尝试自动完成输入框中的输入，以提供对以前输入过的值的可能匹配

• off：表示关闭，禁用浏览器或网页自动填充功能

autocomplete属性适用于所有文本框型的input元素

实例：

运行结果

novalidate属性

概念：novalidate属性就是来禁用form元素的所有文本框内置的验证功能

语法：

    ...

实例：

        电子邮件：
        


        手机号码：
        

        

运行结果

新增表单input元素属性

新增表单元素属性：

• autofocus 设置初始焦点元素

• placeholder 提示文字

• required 是否必填

• autocomplete 是否启用该表单元素的自动完成功能，跟上面表单属性一样

• pattern 使用正则表达式（RegExp后面会讲解），进行数据校验

• list 使文本元素具有下拉列表的功能，需要配置datalist和option标签一起使用

autofocus属性

概念：autofocus属性来实现文本框自动获取焦点

语法：

属性值

• autofocus：表示文本框自动获取焦点。

autofocus属性适用于所有文本框型的input元素

实例：

运行结果

placeholder属性

概念：placeholder属性为文本框添加提示内容

语法：

placeholder属性适用于所有文本框型的input元素

实例：

运行结果

required属性

概念：required属性来定义文本框输入内容不能为空，如果文本框为空，则不允许提交

语法：

required属性适用于所有文本框型的input元素

实例：

运行结果

pattern属性

概念：pattern属性为文本框添加验证功能

语法：

在新增表单元素那节当中介绍过，email,url,tel这3个类型的input 元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。可以用novalidate属性将其禁用验证机制。

实例：

运行结果

list属性

概念：使文本具有下拉列表的功能，但需要datalist和option标签一起使用

语法：

实例：

运行结果