好程序員前端分享HTML5 智能表單

好程序員前端分享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=‘’http://www.baidu.com」>

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="http://www.W3School.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
</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" />

四、取消驗證能夠對form表單添加novalidate屬性，即便form表單中的input添加了required，也將不進行驗證

5.Multiple:能夠輸入一個或多個值，每一個值之間用逗號分開 例：<input type=「email」 multiple/> 還能夠應用於file