1.表單元素新增和廢棄的屬性

表單新增的屬性可以分成2類：

提交類：提交給伺服器設定的相關屬性，formaction、formmethod、formtype、formtarget

控制類：required、autfocus、labels

1.1.form屬性

在H5之前，表單內的所有 從屬標籤（下級元素），必須書寫在form標籤內部。

H5之後允許標籤寫在任何地方，但是，需要做2步操作：給form設定一個id；給元素設定form屬性，form屬性的值就是form  id屬性的值

<form action="xx.api"id="testForm">
    請輸入日期：<input 

1.2.formaction

在H5之前，表單內所有的submit只能提交一個統一的地址，也就是指定的action。

H5可以為每一個submit設定不同的action，是通過設定formaction屬性來實現的。

請輸入日期：<input name="date" type="text"

1.3.formmethod

<form  id="testForm" method="">

    請輸入日期：<input name="date" type="text"/>

<form  id="testForm">
    請輸入日期：<input name="date" type="text"/> <br/>
    請輸入密碼：<input form="testForm" name="psd" type="password"/>
    <input formaction="xx1.api" formtarget="_self" type="submit" value="提交1"/>
    <input formaction="xx2.api" formtarget="_blank" type="submit" value="提交2"/>
</form>

為輸入框或者按鈕 新增autofocus屬性，當頁面自動開啟時，該元素自動獲取游標焦點。

注意：如果對多個元素設定了autofocus屬性，只是第一個設定元素的有效

<form  id="testForm">
    請輸入日期：<input name="date" type="text" /> <br/>
    請輸入密碼：<input name="psd" type="password" />
    <input formaction="xx1.api" formtarget="_self" type="submit" value="提交1"/>
    <input formaction="xx2.api" formtarget="_blank" autofocus  type="submit"value="提交2"/>
</form>

1.7.required

如果在輸入框中設定了required屬性，如果該輸入框沒有內容的時候，點選提交按鈕會提示“請填寫此欄位。”

<form  id="testForm">
    請輸入日期：<input name="date" type="text" /> <br/>
    請輸入密碼：<input name="psd" type="password" required/>
    <input formaction="xx1.api" formtarget="_self" type="submit" value="提交1"/>
    <input formaction="xx2.api" formtarget="_blank" type="submit" value="提交2"/>
</form>

1.8.labels

labels它的屬性值是notelist

<form  id="testForm">
    <div>
       <label for="date"> 請輸入日期：</label>
       <input id="date" name="date" type="text" /> <br/>
    </div>
    <div>
       <label for="psd"> 請輸入密碼：</label>
       <input id="psd" name="psd" type="password" required/>
        <label for="psd"></label>
    </div>
    <input type="button" onclick="validate()" value="提交0"/>
</form>

</body>
<script>
    function validate(){
        var psd = document.getElementById("psd");
         psd.labels[1].innerHTML = "密碼";
         psd.labels[1].setAttribute("style","font-size:12px;color:red");
    }
</script>

1.9 文字框placeholder

當輸入框沒有內容的時候，模糊 顯示placeholder的值。

當輸入框有內容的時候，placeholder被隱藏。

1.8文字框list

H5新增了List屬性，這個屬性的值 一個datalist元素的id的值。Datalist也是H5新增的一個元素，設定了list屬性，該輸入框有“搜尋”功能，會從datalist中搜索出和輸入相關的東西

1.9 pattern

Input 標籤輸入的內容，可以通過配合pattern屬性進行校驗，pattern寫校驗的正則表示式

<form  id="testForm">
    <div>
       <input pattern="[A-z]{5}"  name="date"placeholder="請輸入5個大寫的字元"type="text" /> <br/>
    </div>
    <input type="submit" value="提交"/>

</form>

1.10 input type=image 的width 和height

一般情況下input標籤設定 width和height 是沒有任何效果的，但是對於type=image的時候，可以設定 width 和 height 。

1.1color

當輸入框中屬性設定為color的時候，可以直接呼叫系統提供的調色盤。

唯一的缺點是調色盤缺少透明度，這個屬性有相容性問題，目前發現在iphone手機微信瀏覽器，沒法彈出顏色選項卡。

2.1url

當輸入框中屬性設為url的時候，只接受地址輸入，當輸入的不是地址或輸入的有誤，會不允許提交。具有自我檢測功能。如果在移動端，虛擬鍵盤會自動切換到輸入網址的鍵盤（.com、/www.）

3.1email

當輸入框中屬性設為email的時候，只接受郵箱輸入當輸入的部位郵箱或者輸入有誤時，也會報錯，同時具有自我檢測的功能。如果在移動端，虛擬鍵盤會自動切換到輸入郵箱的鍵盤（@）。

4.1tel

當輸入框中屬性設為tel的時候，那次輸入框就是為電話號碼專門設定的，他並沒有特殊的校驗功能，可以通過設定pattern屬性來完成校驗。如果在移動端，虛擬鍵盤會 自動切換到輸入電話的鍵盤（數字、+、*、#）。

5.1search

Search型別的input元素是專門用來輸入搜尋關鍵詞的文字框，search與text型別僅僅

6.1number

當輸入框中屬性設為number的時候，可以設定輸入框所接受的數字的輸入域可以用min 和max實現這一點

7.1range

當輸入框屬性設定為range的時候，可以設定一段範圍內數值的文字框，它的型別顯示為一個滑塊，同樣可以對它設定min和max控制範圍，預設範圍是0-100   當設定了step屬性的時候，可以指定每次拖動的步伏

8.1date屬性----瞭解即可， 為嘛呢， 有相容性問題

Date在input元素屬性裡是以日曆的形式顯示給使用者。

缺點：就是隻有在谷歌瀏覽器上顯示給使用者日曆形式，其他瀏覽器不相容，就比如IE瀏覽器。

日期 <input type="date" name="date" value="0"/>

9.1time屬性----瞭解即可， 為嘛呢， 有相容性問題

時間屬性input元素中一種專門輸入時間的文字框，它會接收使用者輸入的時間進行自我檢測，時間屬性在其他瀏覽器上也可以顯示和谷歌瀏覽器一樣的效果

時間<input type="time" name="time" value="0"/><br/>

10.1datetime屬性----瞭解即可， 為嘛呢， 有相容性問題

Datetime和前兩個不同的就是直接出現文字框，讓使用者輸入！

時間-日期<input type="datetime" name="datetime" value="2017-08-25"/><br/>

11.1datetime-local

在input中綜合了時間和日期的屬性，在其他瀏覽器上同樣的只顯示文字框

時間--日期<input type="datetime-local"name="datetime-local"value=""/><br/>

12.1week

在input新元素中week主要是顯示日期的第幾周；注意：只會顯示以周的樣式呈現。

周<input type="week" name="week" value=""/><br/>

13.1month

這個屬性主要顯示月份，跟data相比月份在input元素中少了天數。

月份<input type="month" name="month" value=""/><br/>

對於設定了對於type的input，如果input輸入沒有寫東西（空的）提交的時候不做檢查，但是如果填寫了內容，填寫的內容格式不對的話，提交的時候會提示“xxx不對”，同時滑鼠游標focus到該輸入框。