HTML5 新的表單元素

本章介紹以下新的表單元素: 

•datalist 
•keygen 
•output 

瀏覽器支援


Input type     IE    Firefox     Opera   Chrome

##datalist          No      No           9.5       No           10.5       3.0    No    

output          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>