HTML5智能表單的詳細介紹

這篇文章主要介紹“HTML5智能表單的詳細介紹”，在日常操作中，相信很多人在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" />4、取消驗證可以對form表單添加novalidate屬性，即使form表單中的input添加了required，也將不進行驗證5.Multiple:可以輸入一個或多個值，每個值之間用逗號分開
例：<input type=“email” multiple/>
還可以應用于file

到此，關于“HTML5智能表單的詳細介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！