2.12 form formaction formmethod formenctyoe formtarget autofocus required labels属性

最新推荐文章于 2021-07-09 23:22:19 发布

菜菜子QAQ

最新推荐文章于 2021-07-09 23:22:19 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/lzvae/article/details/82682553

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML5中表单的新元素与属性，包括form、formaction、formmethod、formenctype、formtarget、autofocus、required和labels属性，展示了如何增强表单功能和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单新增元素与属性

1. form属性：在HTML4中，表单内从属元素必须书写在表单内部，而在HTML5中，可以把他卸载页面人额好地方，然后为该元素指定一个form属性，属性值为该表单的id即可声明该元素从属于制定表单。

2. formaction属性：在HTML4中，一个表单内所有元素只能通过action属性被统一提交到另一个页面，在HTML5zh中可以为所有提交按钮增加不同的formaction属性，使不同按钮提交不同页面。

3.formmethodsh属性：在HTML4中，zh只能用action属性对表单内所有元素统一一个提交页面，所以只有一个method属性统一制定提交方法（get、post..）在HTML5中使用fotmethod属性对每个表单元素指定不同的提交方法。

4. formenctype属性：在HTML4中，表单元素具有enctype属性指定表单发送到服务器之前对表单内数据编码，formenctype分别制定不同编码。

5.formtarget属性：在HTML4中，表单元素具有target属性，用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

6. autofocus属性：为文本框、选择框或按钮控件加上autofocus属性，当页面打开时，该控件自动获得光标焦点。当前页面、当前输入框第一优先级的才能使用。

7. required属性：HTML5中新增的rquired属性可以应用在大多数输入元素上，再提交时，如果元素中内容为空白，则不允许提交，同时在浏览器显示提示信息。

8. labels属性：在HTML5中，为有可使用标签的表单元素、button、select元素等定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

<!DOCTYPE heml>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>表单新增属性</title>
</head>
<body>
	<form id="test">
		<input type="text">
		
	</form>
	<textarea form="test"></textarea>
	好处是向页面添加一些样式比较好添加

	<form id="test2">
		<input type="submit" name="s1" value="v1" formaction="xx.jsp" formmethod="post" formenctype="text/plain" formtarget="_blank">
		表单数据中的空格变为加号
		提交到xx.jsp页面</br>
		<input type="submit" name="s2" value="v3" formaction="xx.jsp" formmethod="get" formenctype="multipar/form-data" formtarget="_self">
		不对字符编码，使用包含文件上传的表单时使用该值
		提交到xx.jsp页面</br>
		<input type="submit" name="s3" value="v3" formaction="xx.jsp" formmethod="get" formenctype="application/x-www-form-urlencoded" formtarget="_parent">
		发送前编码所有属性，当action属性为get时，浏览器使用此编码方式把表单内容转为字符
		提交到xx.jsp页面</br>
		<input type="submit" name="s4" value="v4" formaction="xx.jsp" formmethod="get" formenctype="application/x-www-form-urlencoded" formtarget="_top">
		_blank是在新页面打开 _self在相同的框架frame中打开 _parent在当前框架的副框架中打开 _top在当前窗口中打开 framename在指定框架中打开
		提交到xx.jsp页面</br>
	</form>

	<form id="test3">
		<input type="text">
		<input type="text" autofocus>
	</form>
	<form action="xx.jsp">
		<input type="text" required="required">
		<button type="submit"> 提交 </button>
	</form>
	<form id="text4">
		<label id="label" for="txt_name">姓名：</label>
		<input id="txt_name">
		<input type="button" name="btnValidate" value="验证" onlick="Validate">
	</form>
</body>
</html>