HTML form表單新增元素
阿新 • • 發佈：2019-02-12
相信大家對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"/>
在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>
<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>
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> 標籤。
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"/>
在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>
<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>
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> 標籤。