HTML form表單新增元素

相信大家對html中表單不陌生吧，下面我們來聊一下在H5裏面表單新增的元素和廢棄元素。

4表單相關新增元素和屬性
4.1表單元素新增和廢棄的屬性 
表單新增的屬性可以分成2類：
提交類：提交給服務器設置的相關屬性，formaction、formmethod，formtype
控制類：required、autofocus、labels。

4.1.1 form屬性
在H5之前，表單內的所有從屬標籤（下級標籤），必須書寫在form標籤內部
H5:允許標籤寫在任何地方，但是，我們需要做兩步操作，必須給form設置一個id，給元素設置form屬性，form屬性的值就是form id的值
<form action="#" id="testForm">
    請輸入日期：<input name="date" type="text"/>
    <input type="submit" value="提交"/>
</form>
    密碼：<input form="testForm" name="psd" type="password"/>

4.1.2  formaction
在H5之前，表單內所有的元素submit只能提交到統一的地址，也就是指定的action。
H5可以爲每一個submit指定action，通過設置formaction屬性來實現的

<form id="testForm">
    請輸入日期：<input name="date" type="text"/>
    密碼：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formaction="xx.api"/>
    <input type="submit" value="提交1" formaction="xxx.api"/>
</form>
4.1.3 formmethod
<form id="testForm" method="get">
    請輸入日期：<input name="date" type="text"/>
    密碼：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formaction="xx.api" formmethod="get"/>
    <input type="submit" value="提交1" formaction="xxx.api" formmethod="post"/>
</form>

4.1.4 formenctype 編碼方式
<form id="testForm" enctype="text/plain">
    請輸入日期：<input name="date" type="text"/>
    密碼：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formaction="xx.api" formenctype="text/plain"/>
    <input type="submit" value="提交1" formaction="xxx.api" formenctype="application/x-www-form-urlencoded"/>
</form>
4.1.5 formtarget
<form id="testForm">
    請輸入日期：<input name="date" type="text"/>
    密碼：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formtarget="_self"/>
    <input type="submit" value="提交1" formtarget="_blank" formenctype="application/x-www-form-urlencoded"/>
</form>
4.1.6 autofocus
爲輸入框或者按鈕自動添加autofocus，當頁面打開時，該頁面自動獲取焦點，光標焦點
如果對多個元素設置該屬性，默認第一個有效
4.1.7  required
如果在輸入框中設置required，如果該輸入框沒有內容的時候，點擊提交的時候，會提示“請填寫此字段”。
<form id="testForm">
    請輸入日期：<input type="text"/>
    密碼：<input  type="password" required/>
   <input type="submit" value="提交0" formtarget="_self" formaction="11.api" autofocus/>
    <input type="submit" value="提交1" formtarget="_blank" formaction="11.api"/>
</form>

4.1.8 labels
Labels 他的屬性值是一個notelist
<form id="testForm">
    <label for="psd">請輸入密碼：</label>
    <input type="password" id="psd" required/>
    <label for="psd"></label>
    </div><br>
    <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:9px;color:yellow");
    }
4.1.9 文本框placeholder
當輸入框沒有內容的時候，模糊顯示placeholder的值
當輸入框有內容的時候，placeholder被隱藏。
4.1.10 文本框 list
H5新增了list屬性 這個屬性的值 一個datalist元素的id的值datalist也是h5新增的一個元素，設置了list屬性，該屬性框有搜索功能，會從datalist中搜索出和輸入相關的東西
<input list="languageList" id="selectLanguageList" placeholder="請輸入你喜歡的編程語言"/>
<datalist id="languageList">
    <option>JS</option>
    <option>JAVA</option>
    <option>C#</option>
    <option>Object-c</option>
</datalist>
4.1.11 pattern
<form id="testForm">
    <div>
        <input pattern="[A-Z]{5}" placeholder="請輸入五個大寫的字符"/>
        <input type="submit" value="提交"/>
    </div>
</form>
Input標籤輸入的內容，可以配合pattern屬性進行校驗，pattern寫校驗的正則表達式。
4.1.12 input type=image的width和height
一般情況下，input標籤設置width和height是沒有效果的，但是對於type=image的時候，可以設置長度和寬度。

4.2 HTML5改良的input元素的種類 
 新增功能：
1.Color：當輸入框中屬性設置爲color時，可以直接調用習題噢能夠提供的調色盤，唯一的缺點是調色盤缺少一個透明度。這個屬性有兼容性問題，目前發現在iphone'手機微信瀏覽器，沒有彈出顏色選項卡
2.url：當輸入框屬性設置爲url時，只接收地址輸入域或者地址輸入，當輸入url爲錯誤時，會有提示。具有自我檢測功能。如果是移動端，虛擬鍵盤會切換到數據網址的虛擬鍵盤。
（.com/www.）
3.email
當輸入框中的屬性設置爲email的時候，只接收郵箱輸入，當輸入的不爲郵箱或者郵箱格式有誤的時候，也會報錯，同樣具有自我檢測功能.
如果是移動端，虛擬鍵盤會切換到數據郵箱的虛擬鍵盤（@）。
（.com/www.）
4.Tel
當輸入框中的屬性設置爲tel時，那麼輸入框就是爲電話號碼專門設置的，他並沒有特殊的檢驗規則，可以通過設置pattern屬性來完成檢測功能。
如果是移動端，虛擬鍵盤會切換到輸入電話的虛擬鍵盤（數字、+、*、#）。
5.search：
Search類型的input元素是一種專門用來輸入搜索關鍵詞的文本框，search類型僅僅在外觀上有所不同。
6.Number
7.當輸入框屬性設置爲number的時候，可以設置輸入框接收的數字的輸入域，可以用num，Max實現這一點。同時還可以設置最小值和最大值 min和max屬性
事件控件
8.range
<input type="date" name="date" value=""/>

當輸入框屬性設置爲range的時候，可以設置一段範圍內數值的文本框，它的類型顯示爲一個滑塊，同樣可以對它設置min和max控制範圍，默認範圍是0-100，當設置了step屬性的時候，可以指定每次拖動的步幅
9.Date在input元素屬性中是以日曆形式顯示給用戶，缺點：只有在谷歌瀏覽器上才能夠具有效果，其他瀏覽器暫時不支持，例如IE、火狐。瞭解即可，有兼容問題。
10.時間：
時間：<input type="time" name="time" value=""/>
瀏覽器支持情況同上
time屬性input元素中一種輸入時間的文本框；
他會接受用戶輸入的時間進行自我檢測
瞭解即可，有兼容問題。

11.Datetime和前兩個不同的就是直接出現文本框，讓用戶輸入！
本人感覺和普通的輸入框沒有什麼區別
瞭解即可，有兼容問題。

在input中綜合了時間和日期的屬性，瀏覽器兼容情況同上！
Week：
星期：<input type="week" name="week"/>
在input中新元素主要是顯示日期第幾周
注意：只會以周的形式呈現
瞭解即可，有兼容問題。

Month
月份：<input type="month" name="month"/>
這個屬性主要顯示月份，與date相比，月份在input元素少了天數；
對於設置了對應的input，如果input輸入框沒有寫東西，提交的時候不做檢驗，但是如果填寫了內容，填寫的內容形式不對的話，提交的提示顯示xxx不對，同時鼠標光標focus到該輸入框
14.Output 元素
<output> 標籤作爲計算結果輸出顯示(比如執行腳本的輸出)。
Firefox、Opera、Chrome 和 Safari 瀏覽器都支持 <output> 標籤。
注意:Internet Explorer 瀏覽器不支持 <output> 標籤。