1.HTML5表單新特性之——新的input type <input type=" "> HTML5之前已有的input type: text、password、radio、checkbox、file、submit、reset、button、image、hidden HTML5新增的input ty ...
1.HTML5表單新特性之——新的input type
<input type=" ">
HTML5之前已有的input type:
text、password、radio、checkbox、file、submit、reset、button、image、hidden
HTML5新增的input type:
1.Email：郵件輸入域，在表單提交時提供簡單的郵箱格式驗證，並彈出一個提示礦口(可定製內容不能定製樣式)
<input type="email">
2.url:URL地址輸入域。在表單提交時提供簡單的URL地址格式驗證，並彈出一個提示視窗
<input type="url">
3.number:數字輸入域，在表單提交時提供簡單的數字格式驗證，並彈出一個提示視窗
<input type="number" min="" max="" step="">
4.tel:電話號碼輸入域，在手機瀏覽器中彈出數字鍵盤
<input type="tel">
5.search:搜索輸入域，在手機瀏覽器中右下角呈現搜索按鍵
<input type="search">
6.range：範圍選擇控制項，幫助用戶在一定範圍內選擇一個數字
<input type="range" min="" max="" step="">
(7)color：顏色選擇控制項，瀏覽器並未自己實現顏色選擇框，而是使用操作系統自帶的顏色選擇控制項
<input type="color">
(8)date：日期選擇控制項，FF沒有實現，推薦使用第三方插件代替，如jQueryUI-datepicker、laydate等
<input type="date">
(9)month：月份選擇控制項，FF沒有實現
<input type="month">
(10)week：星期選擇控制項，FF沒有實現
<input type="week">
HTML5新特性之表單新特性——新的表單元素
HTML5之前FORM可以有的標簽——用於數據提交：
INPUT、TEXTAREA、SELECT/OPTION、BUTTON
HTML5新增表單元素——用於信息提示，不能用於數據提交：
(1)datalist：數據列表，配合option使用，本身為不可見元素，為普通的input提供輸入建議列表
<datalist id="l"><option>XXX</option></datalist>
<input type="text" list="l">
(2)progress：進度條，未指定value屬性則顯示為“進行中”樣式；若指定了value（預設在0~1之間）就可以控制其顯示的進度
<progress value="0.5"></progress>
(3)meter：刻度尺/度量衡，用紅黃綠三色表示出一個數值所處的範圍：不可接受/可以接受/最優範圍
<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最優值" value="實際值"></meter>
(4)output：輸出，用於描述表單中的計算結果，語義標簽，樣式與SPAN無異。
<output>xxx</output>
HTML5新特性表單新特性——表單元素新的屬性——重點
HTML5之前表單元素可用的屬性：
id、class、title、style、type、name、value、checked、selected、disabled、readonly
HTML5之前表單元素新增的屬性：
(1)autocomplete：on/off，自動補全，是否自動記錄之前提交的數據，以用於下一次輸入建議
<input autocomplete="off">
(2)placeholder：站位符，用於在輸入框中顯示提示性文字，與value不同，不能被提交
<input placeholder="提示性文字">
(3)autofocus：false/true，自動獲得輸入焦點
<input autofocus>
(4)multiple：false/true，是否允許多個輸入值，若聲明瞭該屬性，輸入框中（如email）就允許輸入用逗號分隔的多個值
<input type="email" multiple>
(5)form：為一個元素指定form屬性，值為某個表單的ID，則此輸入域可以放到表單的外部
<form id="f"></form>
<input form="f">
========上述五個屬性是新的通用屬性===========
=======上述六個屬性是輸入驗證相關屬性========
(6)required：false/true，必需的/必填項，在表單提交時會驗證是否有輸入，沒有輸入則彈出提示消息
<input required>
(7)maxlength：最大長度，在有輸入的情況下，限定輸入域中字元的個數
<input maxlength="9">
(8)minlength：最小長度，在有輸入的情況下，限定輸入域中字元的個數，不是HTML5標準屬性，僅部分瀏覽器支持（如Chrome）
<input minlength="6">
(9)min：限定輸入的數字的最小值
<input min="">
(10)max：限定輸入的數字的最大值
<input max="">
(11)step：限定輸入的數字的步長，與min屬性連用
<input step="">
(12)pattern：指定一個正則表達式，對輸入進行驗證
<input pattern="1[3578]\d{9}">
註意：上述正則表達式可以省略^和$
