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

2020-04-21 07:46:04易采站长站整理

属性

<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属性的值