HTML5 新的表單元素LOGIN

HTML5 新的表單元素

HTML5 新的表單元素

先說一下新增了哪些:

HTML5 有以下新的表單元素:

< datalist>

<keygen>

<output>

#注意:不是所有的瀏覽器都支援HTML5 新的表單元素,但是你可以在使用它們,即使瀏覽器不支援表單屬性,仍然可以顯示為常規的表單元素。

接下來我們一個一個來介紹:

HTML5 <datalist> 元素

<datalist> 元素規定輸入網域的選項清單。

<datalist> 屬性規定 form 或 input 域應該要有自動完成功能。當使用者在自動完成網域中開始輸入時,瀏覽器應該會在該網域中顯示填寫的選項:

使用<input> 元素的清單屬性與<datalist> 元素綁定.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="demo-form.php" method="get">
<input list="phone" name="phone">
<datalist id="phone">
  <option value="huawei">
  <option value="oppo">
  <option value="vivo">
  <option value="iphone">
  <option value="sony">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9(更早IE版本),Safari不支持 datalist 标签。</p>
</body>
</html>

HTML5 <keygen> 元素

#<keygen> 元素的作用是提供驗證使用者可靠的方法。

<keygen>標籤規定用於表單的金鑰對產生器欄位。

當提交表單時,會產生兩個鍵,一個是私鑰,一個公鑰。

私鑰(private key)儲存於客戶端,公鑰(public key)則被傳送到伺服器。公鑰可用於之後驗證使用者的客戶端憑證(client certificate)。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">  
</head>
<body>
<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

屬性                                值           說明

autofocus                   disabled            時讓 keygen 欄位在頁面載入時獲得焦點。    

challenge                  challenge           使用,且將 keygen 的值設為於提交時詢問。    

disabled                     disabled                     

form                         formname          而言定義的一個或多個表單中所屬。    

keytype                         rsa               rsa 產生 RSA 金鑰。    

name                       fieldname                 時定義中使用 keygen 元素的唯一名稱。

                                             

 HTML5 <output> 元素

<output> 元素用於不同類型的輸出,例如計算或腳本輸出:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">  
</head>
<body>
<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>
<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>
</body>
</html>

new : HTML5 中的新屬性。

屬性                       值                          element_id      定義與輸出域相關的一個或多個元素。    

form                   form_id        定義輸入欄位中所屬的一個或多個表單。    

name                   name          定義物件上的唯一名稱中。 (表單提交時使用)    

下一節

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9(更早IE版本),Safari不支持 datalist 标签。</p> </body> </html>
章節課件