html5中新增的form表单属性
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
html5中新增的form表单属性
html5中新增两个表单属性，分别autocomplete和novalidate属性
1.autocomplete属性
该属性⽤于控制⾃动完成功能的开启和关闭。
可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。
启⽤该功能后，当⽤户在⾃动完成域开始输⼊时，浏览器就会在该域中显⽰填写的选项。
⽤户每提交⼀次，就会增加⼀个⽤于选择的选项
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get" autocomplete="on">
请输⼊：<input type="text" name="txt"/><br/>
<input type="submit"/>
</form>
</body>
</html>
2.novalidate属性
input输⼊类型，当提交表单时，会对这些输⼊内容进⾏验证。
⽽novalidate属性则⽤于在提交表单时不对form或input进⾏验证：
<form action="#" method="get" novalidate>
E-mail:
<input type="email" name="myEmail"/>
<input type="submit"/>
</form>
新增的input属性
1.autofocus属性
autofocus属性⽤于⾃动获取焦点。
在html5中input元素设置该属性后，当页⾯加载时，input 元素会⾃动获得光标焦点。
<input type="text" name="myTxt" autofocus />
2.form属性
form属性⽤于设置input元素属于哪个表单。
在html4中，表单中的所以元素都必须在这个表单的开始标签和结束标签之间，⽽在html5中，如果要将表单开始和结束标签之外的元素归属到该表单，只需要设置form属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get" id="myForm">
常⽤地址：<input type="text" name="ftxt"/>
<input type="submit"/>
</form>
临时地址：<input type="text" name="ltxt" form="myForm"/>
</body>
</html>
在设置form属性时，需要知道表单的id属性值，并将form属性的值也设置成表单id的属性值
3.表单重写属性override
override属性⽤于重写表单元素的某些属性，在html5中，可以重写的表单属性有formaction、formmethod、formenctype、formnovalidate和formtarget，这些属性分别⽤于重写表单的action、enctype、method、novalidate和target属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="a.jsp" method="get">
⽤户名：<input type="text" name="fname"/><br />
<input type="submit" value="张三的提交"/><br/>
<input type="submit" formaction="b.jsp" value="李四的提交"/>
</form>
</body>
</html>
第⼀个input元素会将输⼊的数据提交a.jsp页⾯，⽽第⼆个input元素设置formaction属性，重写了action属性，设置提交页⾯到b.jsp页⾯
4.list属性：
list属性⽤于设置输⼊域的datalist元素，为list属性设置datalist的id属性值，可以将datalist元素与input元素相关联：
list属性适应于以下类型的input元素：text、search、url、telephone、email、date、pickers、number、range和color；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.2.1</title>
</head>
<body>
<input type="url" list="url_list" name="myUrl"/>
<datalist id="url_list">
<option label="Microsoft" value=""/>
<option label="Google" value=""/>
<option label="百度" value=""/>
</datalist>
</body>
</html>
5.multiple属性
multiple属性⽤于设置input元素是否可以有多个值。
该属性只适⽤于email和file类型的input 元素。
如果给email类型的input元素设置multiple属性，那么在输⼊框中可以输⼊多个email地址，多个email地址之间⽤逗号隔开。
如果给file类型的input元素设置multiple属性，那么在打开的选择⽂件对话框中就可以选择对个⽂件
E-mail：<input type="email" name="myEmail" multiple />
File：<input type="file" name="myFile" multiple />
6.pattern正则表达式
正则表达式由⼀系列字符和数字组成，⽤于匹配某个句法规则。
该属性适应于text、search、url、telephone、email和password类型的input元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="myName" pattern="[a-zA-Z]\w{5,15}$">
<html>以字母开头，6-16位</html>
<input type="submit" value="提交">
</form>
</body>
</html>
7.设置input元素在内容为空时的提⽰信息，placeholder属性
在页⾯中有⼀个⽂本输⼊框，但是不知道应该输⼊什么内容时。
<input type="text" name="myAddress" placeholder="输⼊您的常住地址"/>
8.提交为空时提醒 required属性
⽤户必须填写内容才能提交，为空时提交不上
<form>
<input type="text" name="myAddress" placeholder="输⼊您的常住地址" required />
<input type="submit"/>
</form>。