好程式設計師前端分享HTML5 智慧表單

HTML5 智慧表單

新增輸入型

Type=“email” 限制使用者必須輸入email型別
Type=“url” 限制使用者必須輸入url型別
Type=“range” 產生一個滑動條表單
Type=“search” 產生一個搜尋意義的表單
Type=“color” 生成一個顏色選擇的表單
Type=“time” 限制使用者必須輸入時間型別
Type=“month” 限制使用者必須輸入月型別
Type=“week” 限制使用者必須輸入周型別
Type=“datetime-local” 選取本地時間

input型別設定 email：專門用來輸入email地址的文字框,如果該文字框中內容不是email地址格式的，則不允許提交。但它不檢查email地址是否存在。提交時可以為空，除非加上了required屬性。
具有multiple屬性，它允許在該文字框中輸入一串以逗號分隔的email地址。

url型別 專門用來輸入URL地址的文字框。如果該文字框中內容不是URL地址格式的，則不允許提交。mail地址。
例：<input name=‘url1’ type=‘url’ value=‘’”>

Number型別 專門用來輸入數字的文字框。在提交時會檢查其中的內容是否為數字，具有min、max、step的屬性。 
例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

range型別 是用來只允許輸入一段範圍內數值的文字框，它具有min屬性與max屬性，及step屬性，可以指定每次拖動的步幅。
例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” /> 
min 最小值
max 最大值
step 數字間隔

(date, month, week, time, datetime,datetime-local) 擁有多個可供選取日期和時間的新輸入型別。
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間）
例：<input type=“month” &gr;
Search：輸入的是搜尋的關鍵字，與type=“text” 基本上一樣。
Color：用來選取顏色。

output： 定義不同型別的輸出，如計算結果的輸出，或指令碼的輸出。
注：必須從屬於某個表單。即，必須將它書寫在表單內部
Output標籤IE不支援

對新元素樣式的使用：
注意，跟 input 標籤設定樣式一樣，但是要設定標籤中區域性的樣式不能實現。如改變日曆的背景色，顏色框的按鈕效果，等，這些都不可以實現。

表單新屬性

1）、Datalist ：選項列表 例： <input type="url" list="url_list" name="link" />
<datalist id="url_list"> 
  <option label="W3School" value=" />
  <option label="Google" value=" />
  <option label="Microsoft" value=" />
</datalist>
提示：option 元素永遠都要設定 value 屬性。

2.屬性 placeholder屬性： 文字框處於未輸入狀態時文字框中顯示的輸入提示。 autofocus屬性： 給文字框、選擇框、或者按鈕控制元件加上該屬性，當開啟頁面時，該控制元件自動獲得國標焦點，一個頁面只能有一個。 required屬性： 驗證輸入不能為空 list屬性： 結合datalist元素使用 autocomplete屬性： 輸入富足和所用的自動完成功能，是一個節省輸入時間，同時也十分方便的功能。只有三種：on/off/""。on可是顯示指定候補輸入的資料列表，使用datalist元素與list屬性提供候補輸入的資料列表，自動完成時，可以講該datalist元素中的資料作為候補輸入的資料在文字框中顯示： <input type="text" name="greeting" autoconplete="on" list ="greeting">

3.自動驗證 1）、required 可以應用在大多數輸入元素上（除了隱藏元素和圖片），在提交時如果元素內容為空白，則不允許提交，同時顯示提示文字。 2）、pattern 將屬性值設為某個格式的正規表示式，在提交時會檢查其內容是否符合給定格式。
例：<input pattern = “[0-9][A-Z]{3}” title="輸入內容：一個數與三個大寫字母" placeholder=‘輸入內容：一個數與三個大寫字母’> 3）、 min、max、step： 為包含數字或日期的 input 型別規定限定（約束）
max: 最大值
min: 最小值
step: 數字間隔 
例：<input type="number“ min="0" max="10" step="3" /> 4、取消驗證 可以對form表單新增novalidate屬性，即使form表單中的input新增了required，也將不進行驗證 5.Multiple: 可以輸入一個或多個值，每個值之間用逗號分開
例：<input type=“email” multiple/>
還可以應用於file