html5 input元素新特性_动力节点Java学院整理

2019-01-28 21:28:21王冬梅

属性

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

简单描述

新增加的属性描述如下:

    autocomplete :是否显示与现在输入内容相匹配的历史输入记录。 autofocus :当页面加载完成后,此元素获得焦点。 form :设置元素归属表单的ID。 formaction :设置表单action属性的值。 formenctype :设置表单enctype属性的值。 formmethod :设置表单method属性的值。 formnovalidate :关闭表单的验证。 formtarget :设置表单target属性的值。 max :设置<input>元素中数字或日期控件的最大值。 min :设置<input>元素中数字或日期控件的最小值。 minlength :设置文本输入控件的内容最小长度。 pattern :设置元素文本内容需匹配的正则表达式。 placeholder :设置文本控件的预先显示内容。 readonly :设置元素是否只读。 required :设置控件是否为必填项。

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

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

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

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

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

示例:

<form action="#" > <p>验证码:<input type="text" autocomplete="off" /></p> <input type="submit" /> </form>

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

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

示例:

<p>姓名:<input type="text" placeholder="请输入真实姓名" /></p> <p>地址:<input type="text" autofocus /></p>

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

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

示例:

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

formaction :设置表单action属性的值

formenctype :设置表单enctype属性的值

formmethod :设置表单method属性的值

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

formnovalidate :关闭表单的验证。

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

示例:

<form action="#" > <p>用户名:<input type="text" name="loginName" required /></p> <input type="button" value="暂存" formnovalidate /> <input type="submit" /> </form>