HTML5簡單入門系列（六）

前言

以前幾篇已經將HTML5的主要新增元素和特性簡單介紹完畢，LZ一直在猶豫還要不要把其餘元素也寫出來，由於其實沒什麼東西能夠寫，就是本身用到時看一下就行。不過爲了入門系列的完整，猶豫再三，仍是決定簡單寫一下其餘元素（看到其餘深刻的HTML5，LZ就不寫到這裏了，由於LZ也沒掌握，這裏有篇深刻剖析HTML5，各位能夠看看）。

HTML5 新增元素介紹

input類型

新增的輸入類型元素有：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

這些元素都是input標籤的type屬性的可選值，咱們簡單對其作一下介紹。

email：

E-mail: <input type="email" name="user_email" />

通常狀況，在form提交的時候，須要咱們寫一個複雜的正則表達式對Email進行校驗，不合法則不準提交。HTML5中該標籤直接能夠完成校驗工做，省去咱們一些工做。

若是增長multiple屬性的話，則容許咱們用','分割多個郵箱進行驗證，有一個不合法則不容許提交。

同時支持multiple屬性的類型是 file，容許咱們一次上傳多個附件（不使用該屬性，則只能一次上傳一個附件）。

url

url和email基本同樣，只是不支持multiple屬性而已。

number

<input type="number" min="1" max="100" step="2" value="6">

type="number"，表示這是個數字類型的輸入框。

min="1",表示輸入的數字不能小於1

max="100"，表示輸入的數字不能大於100

value="6"，表示默認值是6

step="2"，結合min的值，該輸入框的值只能遞增或遞減2，默認值爲1。

另外 step註明該輸入框的精度（說精度或許不許確），默認值（1）狀況和示例狀況下，是不容許輸入小數值的，若要容許輸入小數，則能夠將step改爲0.1，0.01等，故LZ稱其爲精度。

將step改爲0.2，效果以下

range

range 類型和number基本同樣，只是顯示效果爲滑動條。

Date pickers（(date, month, week, time, datetime, datetime-local)）

實在沒啥好說的~

Week: <input type="week" name="date" />

 search

search 輸入類型用於搜索字段，好比站內搜索或谷歌搜索等。搜索字段的外觀與常規的文本字段無異。

 color

color 輸入類型用於規定顏色。該輸入類型容許您從拾色器中選取顏色。

 

新的表單元素

新的表單元素包括：

• datalist
• keygen
• output

datalist

datalist 元素規定輸入域的選項列表，經過 datalist 內的 option 元素建立。

它和select標籤的區別在於，select是一個可見的元素，而datalist默認是不可見的，它須要綁定到某一個輸入域才能夠展現出來。省去了咱們本身動手用input+div實現下拉框效果的工做。

把datalist綁定到輸入域時，將輸入域的list屬性引用 datalist 的 id：

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

注意，datalist option的value是必填項，若爲空，則下拉框忽略選項。

keygen

keygen 元素是密鑰對生成器（key-pair generator），目前，支持此元素的瀏覽器很少，LZ也沒深刻去試驗，略過吧。

Output

當output元素獲取到焦點，觸發onforminput事件（綁定一個js事件），自動運算。LZ本地測試均沒有看到效果~~~略失望。

HTML5的新屬性

新的 form 屬性：

• autocomplete
• novalidate

新的 input 屬性：

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和 width
• list
• min, max 和 step
• multiple
• pattern (regexp)
• placeholder
• required

autocomplete

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。簡單說就是記錄用戶的輸入框記錄，下次自動提醒。

<form autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
</form>

看到效果，就明白是什麼狀況了。form的autocomplete屬性規定其包裹的標籤元素均繼承autocomplete屬性，而元素特別指出不使用autocomplete屬性的優先級高於繼承來的屬性，因此示例中的email是沒有自動提醒的。

novalidate

novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。

在使用了novalidate屬性的標籤或form，其默認的校驗行爲失效，好比email類型的輸入框不會進行校驗

<form novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

autofocus

autofocus 屬性規定在頁面加載時，域自動地得到焦點。

form

form 屬性規定輸入域所屬的一個或多個表單（使用空格分隔的列表）。

<form id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

即 lname輸入框是表單user_form的一個元素，會一併被提交。

form overrides

表單重寫屬性（form override attributes）容許您重寫 form 元素的某些屬性設定。

表單重寫屬性有：

• formaction - 重寫表單的 action 屬性
• formenctype - 重寫表單的 enctype 屬性
• formmethod - 重寫表單的 method 屬性
• formnovalidate - 重寫表單的 novalidate 屬性
• formtarget - 重寫表單的 target 屬性

這些屬性對於建立不一樣的提交按鈕頗有幫助。

之前咱們的作法是在不一樣按鈕提交前使用js替換form的對應屬性，而HTML5經過該屬性實現，省去了相應代碼的編寫。

height 和 width

這倆屬性只適用於image類型的input標籤，由於在HTML5中，image類型的input標籤點擊提交後會將圖片的點擊座標一塊兒傳遞到後臺。

list

上邊咱們在將datalist元素的時候使用的就是list屬性，這裏就很少說了。

min、max 和 step 

這三個屬性，咱們在number類型的input標籤中都有說到。略過。

multiple 

在email類型的input標籤中說過，略過。同時其支持file類型的input標籤。

pattern，placeholder ，required 

　　<form>
        Country code:
        <input type="text" name="country_code" pattern="[A-z]{3}" placeholder="Three letter country code"
            required="required" />
        <input type="submit" />
    </form>

定義了一個有默認提示的符合某個正則表達式的必填項，看運行效果以下

其餘新增標籤

Details & Summary

<details>
<summary>title</summary>
<p>
<input type="text" name="fn" value="test.doc" />
</p>
<p>
<label>
<input type="checkbox" name="v" checked />chkvalue
</label>
</p>
</details>

點擊summary時detail內容會被展開，效果以下：

meter和progress

<p>顯示度量值：</p>
<meter value="3" min="0" max="10" low="4">3/10</meter><br />
<meter value="0.8" high="0.6">80%</meter><br />
<meter value="0.5" high="0.8">50%</meter><br />

<progress value="40" max="100">40%</progress>

meter 標籤訂義已知範圍或分數值內的標量測量。也被稱爲 gauge（尺度）。

例子：磁盤用量、查詢結果的相關性，等等。

註釋：meter標籤不該用於指示進度（在進度條中）。若是標記進度條，請使用 progress 標籤。

meter支持high/low屬性，噹噹前值低於low或者高於high時，展現結果會顏色變化以表示警告。

小結

LZ看了其餘人總結的一些內容，包括一些高級內容，若是有須要，請移步這裏

到這裏爲止，HTML5的基礎內容基本就結束了。目前的計劃是，節後針對canvas作一些詳細介紹。