HTML5
发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5表单新增元素与属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
1.表单内元素的form属性
在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定的表单了。
代码示例如下：
2.表单内元素的formaction属性
在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。
代码示例如下：
（1）首先在服务端建立一个项目，我在Eclipse中新建一个Dynamic Web Project，然后在三个jsp中编写代码如下：
copy
<@H_616_18@%@ page @H_616_18@language@H_616_18@=@H_616_18@"java"@H_616_18@ @H_616_18@contentType@H_616_18@=@H_616_18@"text/html; charset=UTF-8"@H_616_18@ @H_616_18@
pageEncoding@H_616_18@=@H_616_18@"UTF-8"@H_616_18@%@H_616_18@<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"@H_614_30@meta@H_616_18@ @H_616_18@http-equiv@H_616_18@=@H_616_18@"Content-Type"@H_616_18@ @H_616_18@content@H_616_18@=@H_616_18@"text/html; charset=UTF-8"@H_616_18@>@H_616_18@Insert title here@H_616_18@这是第一个页面！ @H_616_18@
@H_616_18@
> @H_616_18@
（3）点击不同的按钮，页面就会跳转到不同的jsp页面上。也就是说，这个在HTML5中，一个form中的不同按钮可以执行不同的formaction,然后跳转到不同的页面。在HTML4中，一个表单只能有一个formaction，就算有多个按钮，也只能跳到同一个formaction指定的页面。
3.表单内元素的formmethod属性
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。formmethod有post和get两种。
代码示例如下：
通过点击不同的按钮，就能进行不同方式的请求，并把数据发送到请求页面上。@H_616_18@
4.表单内元素的formenctype属性
在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单分别指定不同的编码方式。
示例代码如下：
copy
@H_616_18@
input @H_616_18@type@H_616_18@=@H_616_18@"text"@H_616_18@ @H_616_18@formenctype@H_616_18@=@H_616_18@"text/plain"@H_616_18@<!--不对字符进行编码，在使用包含文件上传的表单时必须使用该值-->@H_616_18@ @H_616_18@
input @H_616_18@type@H_616_18@=@H_616_18@"text"@H_616_18@ @H_616_18@formenctype@H_616_18@=@H_616_18@"multipart/form-data"@H_616_18@<!--在发送前编码所有字符，当表单元素的action属性为get时，需要使用这种方式把表单数据转化成字符-->@H_616_18@ @H_616_18@
input @H_616_18@type@H_616_18@=@H_616_18@"text"@H_616_18@ @H_616_18@formenctype@H_616_18@=@H_616_18@"application/x-www-form-urlencoded"@H_616_18@>@H_616_18@ @H_616_18@
5.表单内元素的formtarget属性
在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
示例代码如下：
6.表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
示例代码如下：
7.表单内元素的required属性
HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示提示文字。
示例代码如下：
copy
input@H_616_18@ @H_616_18@type@H_616_18@=@H_616_18@"text"@H_616_18@ @H_616_18@required@H_616_18@=@H_616_18@"required"@H_616_18@<!--<input type="button" NAME="we" value="提交" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">-->@H_616_18@ @H_616_18@
button @H_616_18@formaction@H_616_18@=@H_616_18@"http://localhost:8080/TestHTMLformaction/First.jsp"@H_616_18@>@H_616_18@提交@H_616_18@button@H_616_18@>@H_616_18@ @H_616_18@
8.表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、SELEct元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
示例代码如下：
copy
<!--JS代码和HTML可以混合进行编程-->@H_616_18@ @H_616_18@
script @R_487_3816@ Validate(){ @H_616_18@
var txtName@H_616_18@ = @H_616_18@document@H_616_18@.getElementById("txt_name"); @H_616_18@
var button@H_616_18@ = @H_616_18@document@H_616_18@.getElementById("btnValidate"); @H_616_18@
var form@H_616_18@ = @H_616_18@document@H_616_18@.getElementById("testform"); @H_616_18@
if(txtName.value.trim() == ""){
var label@H_616_18@ = @H_616_18@document@H_616_18@.createElement("label"); @H_616_18@
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML@H_616_18@ = @H_616_18@"请输入姓名"@H_616_18@; @H_616_18@
txtName.labels[1].setAttribute("style","font-size:9px;color:red");
}
}
label @H_616_18@id@H_616_18@=@H_616_18@"label"@H_616_18@ @H_616_18@for@H_616_18@=@H_616_18@"txt_name"@H_616_18@>@H_616_18@姓名:@H_616_18@label@H_616_18@input@H_616_18@ @H_616_18@id@H_616_18@=@H_616_18@"txt_name"@H_616_18@input@H_616_18@ @H_616_18@type@H_616_18@=@H_616_18@"button"@H_616_18@ @H_616_18@id@H_616_18@=@H_616_18@"btnValidate"@H_616_18@ @H_616_18@value@H_616_18@=@H_616_18@"验证"@H_616_18@ @H_616_18@onclick@H_616_18@=@H_616_18@"Validate()"@H_616_18@>@H_616_18@
大佬总结
以上是大佬教程为你收集整理的HTML5表单新增元素与属性全部内容，希望文章能够帮你解决HTML5表单新增元素与属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
