HTML5表单新增元素与属性
2016-03-17 14:25
721 查看
1.表单内元素的form属性
在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定的表单了。
代码示例如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--指定这个form的id，这样这个form内部的属性就不一定要写在form内部了，也可以写在外部。只要声明id即可-->
<form id="testform">
<input type="text">
<textarea form="testform"></textarea>
</form>
</body>
</html>
2.表单内元素的formaction属性
在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。
代码示例如下：
（1）首先在服务端建立一个项目，我在Eclipse中新建一个Dynamic Web Project，然后在三个jsp中编写代码如下：
[html] view
plain copy
print?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
这是第一个页面！
</body>
</html>
（2）然后在IDEA中实现HTML代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="submit" name="n1" value="提交到第一个页面" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
<input type="submit" name="n2" value="提交到第二个页面" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
</form>
</body>
</html>
（3）点击不同的按钮，页面就会跳转到不同的jsp页面上。也就是说，这个在HTML5中，一个form中的不同按钮可以执行不同的formaction,然后跳转到不同的页面。在HTML4中，一个表单只能有一个formaction，就算有多个按钮，也只能跳到同一个formaction指定的页面。
3.表单内元素的formmethod属性
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。formmethod有post和get两种。
代码示例如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">使用post提交
<input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">使用get提交
</form>
</body>
</html>
通过点击不同的按钮，就能进行不同方式的请求，并把数据发送到请求页面上。
4.表单内元素的formenctype属性
在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单分别指定不同的编码方式。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<!--表单数据中的空格被转化为加号，但不对表单数据中的特殊字符进行编码-->
<input type="text" formenctype="text/plain">
<!--不对字符进行编码，在使用包含文件上传的表单时必须使用该值-->
<input type="text" formenctype="multipart/form-data">
<!--在发送前编码所有字符，当表单元素的action属性为get时，需要使用这种方式把表单数据转化成字符-->
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
</body>
</html>
5.表单内元素的formtarget属性
在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="submit" name="n1" value="提交到第一个页面" formtarget="_blank" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
<input type="submit" name="n2" value="提交到第二个页面" formtarget="_self" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formtarget="_parent" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formtarget="_top" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formtarget="framename" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
</form>
</body>
</html>
6.表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text">
<input type="text" autofocus>
</form>
</body>
</html>
7.表单内元素的required属性
HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示提示文字。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" required="required">
<!--<input type="button" name="we" value="提交" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">-->
<button formaction="http://localhost:8080/TestHTMLformaction/First.jsp">提交</button>
</form>
</body>
</html>
8.表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--JS代码和HTML可以混合进行编程-->
<script>
function Validate(){
var txtName = document.getElementById("txt_name");
var button = document.getElementById("btnValidate");
var form = document.getElementById("testform");
if(txtName.value.trim() == ""){
var label = document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML = "请输入姓名";
txtName.labels[1].setAttribute("style","font-size:9px;color:red");
}
}
</script>
<form id="testform">
<label id="label" for="txt_name">姓名:</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
</body>
</html>
在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定的表单了。
代码示例如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--指定这个form的id，这样这个form内部的属性就不一定要写在form内部了，也可以写在外部。只要声明id即可-->
<form id="testform">
<input type="text">
<textarea form="testform"></textarea>
</form>
</body>
</html>
2.表单内元素的formaction属性
在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。
代码示例如下：
（1）首先在服务端建立一个项目，我在Eclipse中新建一个Dynamic Web Project，然后在三个jsp中编写代码如下：
[html] view
plain copy
print?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
这是第一个页面！
</body>
</html>
（2）然后在IDEA中实现HTML代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="submit" name="n1" value="提交到第一个页面" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
<input type="submit" name="n2" value="提交到第二个页面" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
</form>
</body>
</html>
（3）点击不同的按钮，页面就会跳转到不同的jsp页面上。也就是说，这个在HTML5中，一个form中的不同按钮可以执行不同的formaction,然后跳转到不同的页面。在HTML4中，一个表单只能有一个formaction，就算有多个按钮，也只能跳到同一个formaction指定的页面。
3.表单内元素的formmethod属性
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。formmethod有post和get两种。
代码示例如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">使用post提交
<input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">使用get提交
</form>
</body>
</html>
通过点击不同的按钮，就能进行不同方式的请求，并把数据发送到请求页面上。
4.表单内元素的formenctype属性
在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单分别指定不同的编码方式。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<!--表单数据中的空格被转化为加号，但不对表单数据中的特殊字符进行编码-->
<input type="text" formenctype="text/plain">
<!--不对字符进行编码，在使用包含文件上传的表单时必须使用该值-->
<input type="text" formenctype="multipart/form-data">
<!--在发送前编码所有字符，当表单元素的action属性为get时，需要使用这种方式把表单数据转化成字符-->
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
</body>
</html>
5.表单内元素的formtarget属性
在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="submit" name="n1" value="提交到第一个页面" formtarget="_blank" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
<input type="submit" name="n2" value="提交到第二个页面" formtarget="_self" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formtarget="_parent" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formtarget="_top" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
<input type="submit" name="n3" value="提交到第三个页面" formtarget="framename" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
</form>
</body>
</html>
6.表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text">
<input type="text" autofocus>
</form>
</body>
</html>
7.表单内元素的required属性
HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示提示文字。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" required="required">
<!--<input type="button" name="we" value="提交" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">-->
<button formaction="http://localhost:8080/TestHTMLformaction/First.jsp">提交</button>
</form>
</body>
</html>
8.表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
示例代码如下：
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--JS代码和HTML可以混合进行编程-->
<script>
function Validate(){
var txtName = document.getElementById("txt_name");
var button = document.getElementById("btnValidate");
var form = document.getElementById("testform");
if(txtName.value.trim() == ""){
var label = document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML = "请输入姓名";
txtName.labels[1].setAttribute("style","font-size:9px;color:red");
}
}
</script>
<form id="testform">
<label id="label" for="txt_name">姓名:</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5新增的非主体结构元素
- HTML5 - 使用<time>标注日期和时间
- HTML5 - 页面结构相关的新语义元素汇总
- HTML5 - 经典的上中下三段式布局（并使用<nav>实现侧边导航链接）
- HTML5 - 让老浏览器支持新语义元素的几种方法
- html5 图片转base64预览显示
- HTML5 - 在线检测网页在各种浏览器下的效果
- HTML5 - 使用Geolocation（地理定位）获取用户的位置
- HTML5 - 用<figure/>添加插图和图题
- HTML5新增的主体结构元素
- HTML5 - 简单的上下布局页面样例
- HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
- HTML5 - 使用polyfill（腻子脚本）填补旧浏览器对html5的支持缺陷
- HTML5 - 各大浏览器对html5的支持情况
- 使用ionic框架的<ion-scroll>进行水平滚动时，导致页面难以上下滑动的解决方案
- 关于html5不支持frameset的解决方法
- 第一次
- html/html5
- html5响应式布局案例
- html5拖放本地资源