HTML5 新的表单元素

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

•datalist 
•keygen 
•output 

浏览器支持


Input type     IE    Firefox     Opera   Chrome   Safari


datalist          No      No           9.5         No    No    

keygen          No      No           10.5       3.0    No    

output           No      No            9.5        No    No    


datalist 元素 
datalist 元素规定输入域的选项列表。 
列表是通过 datalist 内的 option 元素创建的。 
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id: 
代码如下:

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> 

提示:option 元素永远都要设置 value 属性。 


keygen 元素 
keygen 元素的作用是提供一种验证用户的可靠方法。 
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。 
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。 
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。 
代码如下:

<form action="demo_form.asp" method="get"> 
Username: <input type="text" name="usr_name" /> 
Encryption: <keygen name="security" /> 
<input type="submit" /> 
</form> 

output 元素 

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

<output id="result" onforminput="resCalc()"></output> 

实例:

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    
<body>
   <form action="demo_keygen.php" method="get">
       用户名: <input type="text" name="usr_name">
      加密: <keygen name="security">
      <input type="submit">
    </form>
</body>
</html>
<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" id="num1">+
    <input type="number" id="num2">=
    <output name="num" for="num1 num2"></output>            
   </form>
</body>
</html>


继续学习
||
<!doctype html> <html> <head>  <meta charset="utf-8">  <title>php.cn</title>  </head> <body> <p>浏览器版本:<input list="words"></p> <datalist id="words"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> <option value="Sogou"> <option value="Maxthon"> </datalist> </body> </html>
提交重置代码