當前位置 : IT培訓網 > Web前端 > Web教程 > HTML5 新增加了哪些表單元素

HTML5 新增加了哪些表單元素

時間:2016-12-08 14:40:48??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
看到了嗎,HTML5新增的表單元素功能還行吧,如果想要學習這方面知識,那就趕緊關注IT培訓網,學習HTML5,做網頁設計師,拿高薪進名企,就在今天!

HTML5的功能是非常強大的,單一個表單就新增了一些元素,使我們做表單更加方便,更加安全,那么HTML5新增了哪些表單呢?這些表單在HTML5中有什么用途呢?

HTML5 表單元素

HTML5 新的表單元素

HTML5 有以下新的表單元素:

· <datalist>

· <keygen>

· <output>

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

HTML5 新表單元素

標簽

描述

<datalist>

<input>標簽定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。

<keygen>

<keygen> 標簽規定用于表單的密鑰對生成器字段。

<output>

<output> 標簽定義不同類型的輸出,比如腳本的輸出。

 

HTML5 <datalist> 元素

<datalist> 元素規定輸入域的選項列表。

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

使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

OperaSafariChromeFirefoxInternet Explorer

實例

<input> 元素使用<datalist>預定義值:

<input list="browsers">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<input type="submit">

</form>

<p><strong>注意:</strong> Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 標簽。</p>

</body>

</html>

運行結果:

HTML5 新增加了哪些表單元素_www.oalvodamoda.com

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一種驗證用戶的可靠方法。

<keygen>標簽規定用于表單的密鑰對生成器字段。

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

私鑰(private key)存儲于客戶端,公鑰(public key)則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書(client certificate)。

實例

帶有keygen字段的表單:

<form action="demo_keygen.asp" method="get">

用戶名: <input type="text" name="usr_name">

加密: <keygen name="security">

<input type="submit">

</form>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

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

運行結果:

HTML5 新增加了哪些表單元素_www.oalvodamoda.com

HTML5 <output> 元素

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

OperaSafariChromeFirefoxInternet Explorer

實例

將計算結果顯示在 <output> 元素:

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

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

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

運行結果:

HTML5 新增加了哪些表單元素_www.oalvodamoda.com

看到了嗎,HTML5新增的表單元素功能還行吧,如果想要學習這方面知識,那就趕緊關注IT培訓網,學習HTML5,做網頁設計師,拿高薪進名企,就在今天!

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天