TML5 新的表單元素

HTML5 有以下新的表單元素:

• <datalist>

• <keygen>

• <output>

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

HTML5 <datalist> 元素

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

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

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

實例

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

<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>

HTML5 <keygen> 元素

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

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

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

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

實例

帶有keygen字段的表單:

<formaction="demo_keygen.asp"method="get">用戶名: <inputtype="text"name="usr_name">加密: <keygenname="security"><inputtype="submit"></form>

嘗試一下 ?

HTML5 <output> 元素

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

實例

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

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0<inputtype="range"id="a"value="50">100 +<inputtype="number"id="b"value="50">=<outputname="x"for="a b"></output></form>

HTML5 新表單元素

如您還有不明白的可以在下面與我留言或是與我探討QQ群{{308855039，我們一起飛！

們已經學過了很多標簽及標簽屬性了，這節課我們還要學一些HTML5對表單這一塊做了專門的修改，就是增加了一些新的標簽和新的屬性。讓表單結構更靈活。我們通過以下這幾方面給大家講解。

√新增表單元素

√新增表單屬性-input屬性

好了廢話不多說，直接看代碼吧！

一、 新增表單元素

a)email:用于輸入單一email地址或者email地址列表,提交表單的時候驗證輸入值是否滿足email格式。

b).url: 用于處理URL,在iPhone中非常好用，會出現對應的鍵盤布局,提交表單的時候驗證輸入值是否滿足url的格式。

c).number：用于包含數字值的輸入字段。您可以設置可接受數字的限制。根據你的設置提供選擇數字的功能，其中min最小值，max為最大值

d).range:會以一個滑塊的形式表現，包含一定范圍內數字值的輸入域，max為最大值，min為最小值，value為默認值，如果沒有設置max和min,默認值是1-100

e).search:用于顯示一個輸入搜索關鍵字的表單，若加上result=”s”屬性，則會在搜索框前面加一個搜索圖標。

f).tel:用于輸入電話號碼，驗證輸入的是否是電話號碼的格式。（以PC端無效果，在移動端使用該框時，會切換到數字鍵盤）

g).color:color類型會提供顏色拾取器，供用戶選擇顏色，并將用戶選擇的顏色填充到此元素中。

h).date:用于日期選擇的表單域，支持日期，月份，周。日期和時間類型

綜合案例：

頁面顯示效果

二、新增表單元素屬性（主講input新增的屬性）

a).autofocus: 在打開頁面時使元素自動獲取焦點 常給input,button,select,textarea 等標簽使用

<input type="password" name="pwd" autofocus="autofocus"/>

給密碼框使用之前

給密碼框使用之后

b). placeholder: 在用戶輸入時進行提示常應用在input,textarea等標簽

<input type="text" name="name" placeholder="請輸入公司名稱" />

c). required: 表明該元素是必填項，當提交表單的時候會自動驗證該元素的內容是否不為空 常給

input,textarea等標簽使用。

<input type="text" name="url" required="required" />

d). max/min/step限制值的輸入范圍，以及值的變化程度。新增number元素有介紹。 常給input標簽使用。

<input type="number" name="age" step="5" min="10" max="25"/>

e). autocomplete:使form元素或者input元素擁有自動完成功能，既記錄用戶之前輸入的值，

關閉為off，默認為on。 常給form,input使用

<input type="url" name="url" autocomplete="off"/>

值為off時：

值為no時：

f). multiple: 在選擇文件時，默認只能單選，加上這個屬性后，則可以使用鼠標選中多個文件進行上傳，或者給select標簽使用

<input type="file" name="file" multiple="multiple" />

h). formaction:重寫表單的action屬性, formmethod: 重寫表單的method屬性.

<input type="submit" value="提交" formaction="demo.html"

formmethod="post"/>

i). list特性和datalist 選值列表list屬性的值為datalist元素的id，datalist元素類似于選擇框，在文本框獲

得焦點的時候以提示輸入的方式顯示。

地址：<input type="text" list="item" name="address"/>

<datalist id="item">

<option value="1">北京</option>

<option value="2">上海</option>

<option value="3">深圳</option>

</datalist>

顯面效果：

j).新增form屬性

在我們之前的html中，表單元素必須放在form元素所包含的里面，在html5中，可以把他們寫在頁面上的任何一個地方，然后給該元素增加一個form屬性，form屬性的值為form表單的id。在form元素里面的表單元素可以不用添加form屬性，如果你想利用form獲取所有表單元素的值，那么在form元素外面的表單元素就必須添加form屬性，input、select、textarea等元素都滿足該功能。

代碼：

以后我們再寫頁面的時候可以使用新增的標簽及屬性了，有了這些標簽及屬性對于我前端的開發人員來說，真是一大幸事啊！