lt;form> 標簽用于為用戶輸入創建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用于向服務器傳輸數據。

下面小編為大家介紹幾個常用的表單標簽。

<datalist>標簽

這個標簽規定了 <input> 元素可能的選項列表。

一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數據。

我們來演示一個案例，大家就知道怎么用了：

上面這個小代碼，我們看得出，input標簽的list屬性值和datalist標簽的id是一樣的，沒錯，它們就是這樣來相互關聯起來的。當它們結合起來之后，不僅可以像select標簽一樣可以通過下拉來選擇已有的選項，還可以根據用戶輸入的字符，對選項進行匹配篩選。

效果圖如下：

有了datalist標簽，我們實現這種效果起來十分簡單，不需要任何的JavaScript代碼也能輕松實現。

<output>標簽：

標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結果，我們都可以使用這個標簽。

我們來舉個例子：輸入的數字乘以2后得到的結果，我們用output輸出顯示。

我們用oninput屬性監聽著表單的變化，并把得到的結果賦值到output標簽的value。我們來看看效果圖：

其中，output標簽是可以離開form表單標簽的，但是，如果你這樣做的話，必須給output標簽添加form屬性，其屬性值是與其相關聯form表單的id。

我們來將output移到form表單的外面試試：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代碼有幾處不同之處，form標簽多了一個id，值為“demo”，output標簽被移到了form標簽外面，不再是form標簽的子節點，變成了兄弟節點（當然你可以把它移到文檔的其他位置）。output標簽還多了一個form屬性，此時，它的值正好是form標簽的id值：“demo”。這種寫法，代碼同樣是奏效的。

<keygen>標簽

這個標簽相信大家很少用到，但是也是為了學習，我們來了解一下就好。

這個標簽規定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器，這種機制是專為使用基于Web的證書管理系統。

我在MDN（Mozilla Developer Network）的網站上看到了關于它的一些介紹：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大瀏覽器廠商還在討論是否要保留它，在討論結束之前，你最好還是別用它。

而另一段話則是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：雖然有些瀏覽器還支持它，但是這個特性已經被移除出web標準了，以后別使用它了。

、良生- input type=file與文件上傳

本文所說的input type=file指的是type類型是file的input元素，最簡HTML代碼如下：

<input type=file>

但是，為了習慣，我們多寫成：

<input type="file">

在HTML5出現之前(XHTML)，我們的閉合規則則有些出入：

<input type="file" />

顧名思義，選擇文件，并上傳文件。

在萬惡的舊時代，HTML5還沒有出現之前，原生的file input表單元素只能讓我們一次上傳一張圖片。無法滿足一次上傳多圖的交互需求，所以，很多場景，就被swfupload.js給取代了，有點逐漸淡出人們視野的感覺。

然，技術發展，日新月異，三十年河東，三十年河西。隨著原生HTML5表單對多圖(multiple屬性)、上傳前預覽，二進制上傳等支持越來越廣泛，原生的file input表單元素又迎來了新的升級，flash為背景的swfupload.js注定要落寞。

但是，對于PC項目，IE8-IE9瀏覽器還是不能忽略的。所以，現在，很流行的一種處理方式，就是HTML5 file上傳和flash swfupload上傳一起整合的模式，優先使用原生HTML5上傳，不支持的，使用flash上傳。我之前有篇關于HTML5上傳的文章，每天訪問量很高的：“基于HTML5的可預覽多圖片Ajax上傳”，大家有興趣可以看看。

如果想使用瀏覽器原生特性實現文件上傳(如圖片)效果，父級的form元素有個東西不能丟，就是：

enctype="multipart/form-data"

enctype屬性規定在發送到服務器之前應該如何對表單數據進行編碼，默認的編碼是：”application/x-www-form-urlencoded“。對于普通數據是挺適用的，但是，對于文件，科科，就不能亂編碼了，該什么就是什么，只能使用multipart/form-data作為enctype屬性值。

無論是舊時代的單圖上傳，還是HTML5中的多圖上傳，均是如此。

文件，尤其圖片，上場前能夠預覽，是很棒的交互體驗。不走服務器，不耗費流量，多棒！

理想雖好，實現起來……

在HTML5還沒出現的舊時代，只有低版本的IE瀏覽器貌似有方法，使用私有的濾鏡，超越安全的限制（其實是利用了不好的東西），實現圖片直接預覽；但是呢，那個時候，Chrome, FireFox沒有這一出，于是，想要使用原生file input實現圖片的上傳前預覽，兼容性坎很難跨過去。

但是，后來，HTML5來了，我們出現了轉機，IE10+以及其他現代瀏覽器，可以讓我們直接讀取圖片的數據，然后在頁面上呈現，實現了上傳前預覽；加上之前老IE的濾鏡策略，貌似，可行。但是呢但是，老的IE瀏覽器只能最多一次選擇一個文件，因此，只有單圖上傳的時候，大家可以考慮考慮。

傳統的form提交，是要改變頁面流的，也就是刷新后跳轉。好的體驗應該是走Ajax交互的。HTML5里面支持二進制formData數據提交，因此，可以從容Ajax提交上傳的文件數據；那老舊的IE瀏覽器怎么辦？

一般方法如下：

<form action="" method="post" enctype="multipart/form-data" target="uploadIframe">< <iframe id="uploadIframe"></iframe>

var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; var response = doc.body && doc.body.innerHTML;

OK, 當然，你也可以不用像上面這么麻煩，直接使用jquery.form.js. 原理呢，就是上面這樣，但是，不需要這么麻煩。

原生的file input不收待見的另外一個原因是：長的丑還不好控制。

舉個例子，下圖這個“選擇文件”這幾個文字，我們就不好對file控件動刀子實現自定義：

file input框

怎么辦呢？

有一種方法是這樣的： 讓file類型的元素透明度0，覆蓋在我們好看的按鈕上。然后我們去點擊好看的按鈕，實際上點擊是是file元素。

然而，此方法有一些不足：

更好的方法是，使用label元素與file控件關聯，好處在于：

<label class="ui_button ui_button_primary" for="xFile">上傳文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

效果如下（真實實時效果）：

input file類型控件有一個屬性，名為

accept

, 可能有些小伙伴不太了解。可以用來指定瀏覽器接受的文件類型，也就是的那個我們打開系統的選擇文件彈框的時候，默認界面中呈現的文件類型。例如：

accept="image/jpeg"

，則界面中只有jpg圖片，如下截圖，同時，窗體右下方是“自定義文件”按鈕：

自定義文件

實際開發的時候，很少只允許傳jpg圖片，應該都是只能傳圖片類型，此時，可以使用：

accept="image/*"

于是乎，“自定義文件”按鈕變成了語義更明確的“圖片文件”：

圖片文件

accept屬性值其實是MIME類型, 例如下面幾個可能常用的：

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2"

然后，多個屬性值使用逗號分隔，例如：

<input accept="audio/*,video/*,image/*">

現代瀏覽器直接value = "", 有些IE瀏覽器貌似不行，好像使用file.outerHTML = file.outerHTML，我自己沒測試。

不過我覺得比較麻煩，還要判斷瀏覽器什么的。像本文的Ajax單圖上傳，直接form.reset()就可以了。

以上~

本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。