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="https://www.cnblogs.com/webenjoy/p/0.5"></progress>
(3)meter：刻度尺/度量衡，用紅黃綠三色表示出一個數值所處的范圍：不可接受/可以接受/最優范圍
<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最優值" value="https://www.cnblogs.com/webenjoy/p/實際值"></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}">
注意：上述正則運算式可以省略^和$
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113655.html
標籤：Html/Css
上一篇：HTML常用標簽四
下一篇：案例