087_html5表单元素_yyhnxx-优快云博客

本文介绍了HTML5中新增的三个表单元素：datalist、keygen和output。datalist元素允许为输入域定义选项列表；keygen元素用于生成密钥对，但因浏览器支持不足而较少使用；output元素则用于显示计算或脚本输出的结果。文章通过代码示例和效果图展示了这些元素的用法。

1. html5的新的表单元素:

1.1. html5拥有若干涉及表单的元素和属性。

1.2. 本章介绍以下新的表单元素:

datalist
keygen
output

2. datalist元素

2.1. datalist元素规定输入域的选项列表。

2.2. 列表是通过datalist内的option元素创建的。

2.3. 如需把datalist绑定到输入域, 请用输入域的list属性引用datalist的id。

2.4. 例子

2.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>datalist元素</title>
	</head>
	<body>
		<form action="input_type_range.html" method="get">
			Webpage: <input type="url" list="url_list" name="link" />
			<datalist id="url_list">
				<option label="W3School" value="http://www.w3school.com.cn" />
				<option label="Google" value="http://www.google.com" />
				<option label="Microsoft" value="http://www.microsoft.com" />
			</datalist>
			<input type="submit" />
		</form>
	</body>
</html>

2.4.2. 效果图

3. keygen元素

3.1. keygen元素的作用是提供一种验证用户的可靠方法。

3.2. keygen元素是密钥对生成器(key-pair generator)。当提交表单时, 会生成两个键, 一个是私钥, 一个公钥。

3.3. 私钥(private key)存储于客户端, 公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

3.4. 目前, 浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

3.5. 例子

3.5.1. keygen.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>keygen元素</title>
	</head>
	<body>
		<form action="Keygen.action" method="get">
			Username: <input type="text" name="usr_name" />
			Encryption: <keygen name="security" />
			<input type="submit" />
		</form>
	</body>
</html>

3.5.2. 效果图

3.5.3. Keygen.java

package com.lywgames.mysessionlistener;

import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Keygen extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		Enumeration<String> enums = req.getParameterNames();
		while(enums.hasMoreElements()) {
			String name = enums.nextElement();
			System.out.println(name + ":" + req.getParameter(name));
		}
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

3.5.4. 2048(High Grade)请求结果

usr_name:zhangsan
security:MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCwx6WRyZ+g8aqLEMC+s/XiGs132Q7e5fiZ0eW686d9U9rcv+aBMJePDKjQ5Cs/qYRxmfGY/fC99jPIwqz8QX0L3OourjDOpW8F+MGx0ipl4+5CA8kNFbTiL5pPEuNXXGv8BJjdfOlo797/n9nfNCCX5mtB7+gVVipuRn0JNk2OOiZAGg/YL16TdEGRcN42UvHh3HgimN6j1Vpw8OlOz1ICD+Vxh8EUPMmxu9Cr7oFYgNGPHYsxrdCEYOX+Hy19cTjNgtl/Y2zjYTtY5EeIfZ1O6K1sfLxM4q1Qzzmn41IW+0ebM9YLuY9u4EBGzQeCOgt0XIkpbuDlmGmEHDq8F38xAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAQlqn30SSNWA5gkdqXPCA2Nv6yV2kbXX452TFceIW3iZbB/04BL1pQLc3FRsTOY70SPwB4KU8HHZMVGEzKgq0wEFuRge0X3iyGtMwUZUItrTp1LVDdKaDpg6pZMAfw8yDSXFTOnVertBJH3tXhYvGeSZlXMfB0SzB3bNTsRaImRwy9ICXHGLcTXiQzHlRQSBM8LxJKXFcrws1kxh3rSuHs7VzRWGYwrTTbD3CaMIPk4+fZW2+sdVsC6fggUioq7oQblZu17UN3Us+QtCaRk2RfMjO4mZ68fzW6KUYm4BjnzaLsr+ZJXTAbdOGRENqlDYPRLv2Dp/p6COELhTg+G/VFA==

3.5.5. 1024(Medium Grade)请求结果

usr_name:zhangsan
security:MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA6hR4THvI/Yyhn65PN20u9S1NYD6IzhDcdR92g0EEIJhaDS0cebxNn4uvZ9/VO7ZISOOWl0CnHSLHwzoGNZQCMsNpsTzTm4eXyJBLTaE52e3P5OFv2Qm2epxk/BbDL6FCHZY0XNDep+RnGlf9QqOwldbr7V5hDB8t9PFjQKwvOgECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBACTJmQKRGOaMjIlhoPmILAKqfq1+rltRbcFmu+phcP+O7KrjzRMuFb83aPR3rSliG3+/LsW4MQ9KpxIn1bP9D+Ado8b2PSReozq9/unTwGRQ7zEFUij9vADWLaA8FPDuXDrT6uONEnrWsW7AxWlB2/q4czQoyHq1d/Xr934SWM8B

4. output元素

4.1. output元素用于不同类型的输出, 比如计算或脚本输出:

4.2. 例子

4.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>output元素</title>
	</head>
	<body>
		<p>使用output元素的简易计算器:</p>
		<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
			0 <input type="range" id="a" value="50" /> 100
			+ <input type="number" id="b" value="50" />
			= <output name="x" for="a b"></output>
		</form>
	</body>
</html>

4.2.2. 效果图