第一部分：新增的input輸入類型
· html5之前支持的輸入類型
- text
- radio 單選按鈕
- checkbox 多選
- select-option 下拉列表
- password 密碼
- submit 提交
- button 按鈕
- image 圖片形式的提交按鈕
- hidden 隱藏的輸入字段
- reset 重置
- file 上傳文件
· html5新增的輸入類型
email類型，在email輸入類型中吠式，提交的時候會驗證是不是郵箱
url類型，同上
number類型
<input type="number" min="1" max="50" value="0" step="2" name="">
運行效果
- range類型
<input type="range" min="1" max="30" value="10" step="2" name="">
運行效果
- 日期檢出器類型
- date類型
<input type="date" name="">
運行效果
- month類型
<input type="month" name="">
運行結(jié)果
- week類型
<input type="week" name="">
運行結(jié)果
- time類型
<input type="time" step="5" value="12:05:30" name="">
運行效果
- search類型
<input type="search" name="">
運行結(jié)果
- tel類型：在電腦端是普通的輸入框，在移動設備上糕簿，輸入的時候鍵盤會切換為數(shù)字鍵盤。
-
color類型
<input type="color" name="">
運行效果
第二部分：新增的input屬性
- autocomplete屬性狡孔，用戶下次輸入相同的內(nèi)容時懂诗，瀏覽器將會自動輸入，另外在datalist中苗膝，可以根據(jù)用戶輸入內(nèi)容實時更新列表殃恒。
<form autocomplete="on">
<input type="text" id="city" list="citylist" name="">
<datalist id="citylist">
<option>beijing</option>
<option>qingdao</option>
<option>shanghai</option>
</datalist>
</form>
運行結(jié)果
- autofocus屬性，自動獲得焦點的屬性辱揭，謹慎使用芋类，在指定autofocus的時候，要明確頁面的主要目的是什么界阁。
<input type="submit" autofocus="on" name="">
運行效果
有些瀏覽器可能對這個屬性不支持侯繁，那么就要加入一段js來解決兼容問題。
<input type="submit" autofocus="on" id="submit1" name="">
<script>
if (!("autofocus" in document.createElement("input"))){
document.getElementById("submit1").focus();
}
</script>
- 新增的form屬性：在H5之前泡躯，用戶要提交一個表單贮竟，必須報相關的元素全部放在form便簽之內(nèi)丽焊，但是在h5中，這個問題得到了解決咕别，form的靈活性大大提高技健，看了下面這個代碼，你就知道怎么使用了惰拱！
<form action="#" method="get" id="form1">
請輸入姓名： <input type="text" name="name1" autofocus="">
<input type="submit" name="submit1">
</form>
<!-- 在form1提交的時候雌贱，下面這個input也會一起唄提交 -->
請輸入地址：<input type="text" name="address1" form="form1">
運行結(jié)果
- 新增的表單重寫屬性，表單重寫屬性不適用于所有的input輸入類型偿短，只適用于submit和image輸入類型
- formaction：用于重寫表單的action屬性
- formenctype：用戶重寫表單的enctype屬性
- formmethod：用于重寫表單的methodshuxing
- formnovalidate：用于重寫表單的novalidate屬性
- formtarget：用于重寫表單的target屬性
例如：
<form action="1.asp">
<input type="email" name="">
<input type="submit" name="" formaction="1.asp">
<input type="submit" name="" formaction="2.asp">
</form>
- 新增的list屬性：前面已經(jīng)解釋過
- 新增的min欣孤、max。step屬性昔逗，前面也有介紹過
- 新增的multiple屬性降传，表示多選，上傳多個文件等勾怒。
<select multiple="">
<option>beijing</option>
<option>shanghai</option>
<option>shenzhen</option>
</select>
運行效果
<input type="file" multiple="">
以上表示可上傳多個文件
- 新增的pattern屬性婆排，是一個正則表達式，可以對輸入的內(nèi)容進行正則驗證
請輸入6位郵政編碼：
<input type="text" pattern="[0-9]{6}" name="">
運行結(jié)果
- 新增的require屬性笔链，表示必填項目段只。
第三部分：新增的form元素
新增的datalist元素
-
新增的keygen元素（不建議使用）：密鑰對生成器。
運行結(jié)果（firefox中鉴扫，chrome中沒效果） 新增的output元素：用于在瀏覽器中顯示計算結(jié)果或腳本輸出赞枕，包含完整的開始和結(jié)束標簽。
第四部分：新增的form屬性
- 新增的autocomplete屬性
- 新增的novalidate屬性：用于取消表單提交時候的驗證
