1. 關(guān)于文件輸入控件
使用文件輸入控件可以瀏覽本地網(wǎng)絡(luò)的一個文件，以上傳到網(wǎng)站。比如下面這段代碼
<input type="file" name="file">
上傳一個文件并沒有什么稀奇的，但是有的時候我們希望一次性上傳多個文件，比如身份證的正反面圖片。這需要借助于 multiple 屬性，代碼就變成了下面這樣。
<input type="file" name="file" multiple>
這種方式的確很方便，而且很簡單，但并不是所有瀏覽器都支持這一功能，我嘗試了 Firefox, Chrome, Opera 這三種瀏覽器，Firefox 目前尚不支持這一功能，至少在我的電腦上是不支持的。
文件輸入控件還有一個 accept 屬性，理論上可以用來限制上傳文件類型。然而，實際上它只是建議性的，并且很可能會被忽略。它接受逗號分隔的 MIME 類型，比如將上傳的文件類型限制為圖片，就可以將代碼寫成如下形式。
<input type="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png" multiple>
很不幸的是，Firefox 仍不支持這個屬性，好在 Chrome和 Opera 已經(jīng)支持這個屬性了。
2. 關(guān)于復選框
一個復選框通常是一個方形的盒子，可以打勾或者去掉勾，但是用 JavaScript 可以設(shè)置第三種中間狀態(tài)，這樣的復選框外觀上既不是勾選也不是未勾選，就像下面這樣。
代碼實現(xiàn)如下
<input type="checkbox" name="option1" id="option1">
<input type="checkbox" name="option2" id="option2" checked>
<input type="checkbox" name="option3" id="option3">
<script>
function init() {
document.getElementById("option3").indeterminate = true;
}
window.onload = init;
</script>
3. 關(guān)于隱藏輸入域
隱藏輸入類型用于在表單中增加對用戶不可見，但是需要提交的額外數(shù)據(jù)。舉個例子來說，隱藏域有時候用來告知服務器可接受的上傳文件的最大容量，下面的例子就是告訴服務器上傳文件的大小是 20KB。
<input type="hidden" name="MAX_FILE_SIZE" value="200000">
4. 使用數(shù)據(jù)列表
大多數(shù)輸入類型包含一個屬性 list， 它和一個新元素 datalist 結(jié)合使用。這個元素定義當在表單控件輸入數(shù)據(jù)時可用的一個選項列表。效果像下面這樣
代碼如下所示
<input type="text" name="salary" placeholder="Enter desired salary" list="salaries">
<datalist id="salaries">
<option value="1000"></option>
<option value="4000"></option>
<option value="8000"></option>
<option value="12000"></option>
</datalist>
5. 添加菜單結(jié)構(gòu)
可以利用 optgroup 元素來分組類似的 option 元素。得出下面的結(jié)果
代碼如下
<select name="class">
<optgroup label="science lesson">
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="biology">Biology</option>
</optgroup>
<optgroup label="liberal lesson">
<option value="history">History</option>
<option value="political">Political</option>
<option value="geography">Geography</option>
</optgroup>
</select>
6. 顯示進度
可以使用 progress 顯示某一步驟的進度，有兩個屬性，一個是 max，用于設(shè)置最大值，另一個是 value，表示當前的值。
<p><progress value="1" max="3">1/3</progress></p>
效果如下
對于不支持該元素的瀏覽器，在元素的標簽里加上有意義的文字很重要。因為如果 progress 元素不支持，就可以顯示文字。
還有一個看上去和 progress 很像的元素，那就是 meter 元素，這二者有很重要的區(qū)別， progress 用于顯示步驟的進度，而 meter 用來顯示度量，也就是，某個已知范圍里的一個特定值。這個元素有六個常用屬性，min 和 max 屬性設(shè)置范圍的兩端，而 value 設(shè)置當前的度量。還有三個屬性用于圖解的目的，它們分別是 optimum, low, high，可以將區(qū)間劃分為區(qū)域，optimum 用于設(shè)置最適宜的區(qū)域，下面看個例子。
<p><meter min="0" max="100" value="10" low="20" optimum="60" high="90">10%</meter></p>
<p><meter min="0" max="100" value="70" low="20" optimum="60" high="90">70%</meter></p>
<p><meter min="0" max="100" value="95" low="20" optimum="60" high="90">95%</meter></p>
7. label 的使用
有兩種方法可以創(chuàng)建可點擊的標簽，第一個，也是推薦的做法，用 label 包括表單控件，示例如下：
<label>Your name: <input type="text" name="name"></label>
另一種方法是使用 for 屬性 ：
<label for="name">Your name: </label>
<input type="text" name="name" id="name">
使用 for 屬性的好處是，表單控件不需要出現(xiàn)在 label 的內(nèi)部，但是因為這需要手動配對，使用起來比較麻煩。除非必須，推薦使用第一種方法。
8. 表單驗證
<form name="signForm">
<input type="text" name="phone" pattern="[0-9]{11}" id="phone" required>
<input type="submit" name="">
</form>
這樣的一個表單，我們可以在 JS 中對每個控件進行驗證，也可以對整個表單進行驗證。假設(shè)現(xiàn)在要對 input 控件進行驗證，我們可以使用 checkValidity() 方法。
<script>
if( document.signForm.phone.checkValidity() === false ) {
console.log("Failed!");
}
</script>
如果一個表單里有很多個控件，那么我們當然不希望針對每個控件都寫一段驗證代碼，所以這時候可以對整個表單進行驗證。
document.signForm.checkValidity();
令人激動人心的是，我們還可以自定義錯誤提示信息，針對上面表單中的 phone 控件，我們有兩個約束規(guī)則，分別是 pattern 和 required， 如果不符合條件，瀏覽器默認會彈出提醒，像下面這樣。
我們可以通過 setCustomValidity() 方法自定義彈出消息。
document.signForm.phone.setCustomValidity("Hello World!");
9. 禁用默認樣式
表單元素的默認樣式一般都不漂亮，所以有的時候我們想要對元素進行自定義，比如對于 input[type = number] 控件的默認樣式是框內(nèi)有上下調(diào)節(jié)的按鈕，我們可以通過修改樣式表，將其去除。
input[type = number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
不斷更新 ...
