一、HTML5新增屬性
1.1、contextmenu
contextmenu的作用是指定右鍵菜單。
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare"> </div> <menu id="menuShare" type="context"> <menuitem label="分享到QQ空間" onclick="alert('QQ');"></menuitem> <menuitem label="分享到朋友圈" onclick="alert('朋友圈');"></menuitem> <menuitem label="分享到微博" onclick="alert('微博');"></menuitem> </menu> </body> </html>
contextmenu 在Html5中，每個元素新增了一個屬性：contextmenu, contextmenu 是上下文菜單，即鼠標右擊元素會出現一個菜單。menu 要實現鼠標右擊元素會出現一個菜單，還必須瞭解HTML5裏新增的另一個元素:menu 顧名思義menu是定義菜單的， menu 元素屬性： type ：菜單類型屬。 有三個值 1）context：上下文； 2）toolbar：工具欄；3）list：列表menuitem 屬性：label：菜單項顯示的名稱icon：在菜單項左側顯示的圖標onclick：點擊菜單項觸發的事件
1.2、contentEditable
規定是否可編輯元素的內容屬性值：true -----可以編輯元素的內容false -----無法編輯元素的內容inherit -----繼承父元素的contenteditable屬性當爲空字符串時，效果和true一致。當一個元素的contenteditable狀態爲true（contenteditable屬性爲空字符串，或爲true，或爲inherit且其父元素狀態爲true）時，意味着該元素是可編輯的。否則，該元素不可編輯。
document.body.contentEditable=true; 可以修改已發佈網站
<html> <head> <meta charset="UTF-8"> <title>contentEditable屬性</title> </head> <body> <h2>contentEditable屬性</h2> <div contenteditable="true"> Hello contentEditable </div> </body> </html>
1.3、hidden
hidden屬性用於隱藏該元素。一旦使用了此屬性，則該元素就不會在瀏覽器中被顯示2個布爾值true 規定元素是可見。false 規定元素是不可見。
<div hidden="hidden"> Hello Hidden </div>
爲了兼容一些不支持該屬性的瀏覽器（IE8），可以在CSS中加如下樣式：
*[hidden]{ display: none; } var div1=document.querySelector("body #div1"); div1.innerHTML+=" +++";
1.4、draggable
規定元素是否可拖拽3個枚舉值true 規定元素是可拖動的。false 規定元素是不可拖動的。auto 使用瀏覽器的默認特性。
示例：
<html> <head> <meta charset="utf-8"> <script src="Scripts/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <title></title> <style> #div1, #div3 { height: 200px; width: 200px; border: 1px solid #00f; margin-bottom: 10px; } #div2 { height: 100px; width: 100px; background: yellow; } </style> <script> var div1, div2, div3, msg; window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div3 = document.getElementById("div3"); msg = document.getElementById("msg"); div2.ondragstart=function(){ msg.innerHTML+="div2開始拖動了<br/>"; } div2.ondrag=function(){ msg.innerHTML+="拖動中<br/>"; } div2.ondragend=function(){ msg.innerHTML+="拖動結束<br/>"; } div1.ondragover = function(e) { e.preventDefault(); } div1.ondrop = function(e) { div1.appendChild(div2); } div3.ondragover = function(e) { e.preventDefault(); } div3.ondrop = function(e) { div3.appendChild(div2); } $("#div1").data("name","電池"); alert($("#div1").data("name")); div1.setAttribute("data-order-price",998.7); alert(div1.getAttribute("data-order-price")); } </script> </head> <body> <div id="div1" data-order-price="98.5" data-name="充電寶"></div> <div id="div3"></div> <div id="div2" draggable="true"></div> <h3 id="msg"></h3> </body> </html>
1.5、data-*
data-*屬性能讓用戶自定義屬性的方式來存儲數據
<span data-order-amount=100></span>取值：getAttribute('data-order-amount')dataset.orderAmountjQuery中的data()方法同樣可以訪問
使用jQuery與javascript添加與獲取data屬性示例：
<html> <head> <meta charset="UTF-8"> <title>data-*</title> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h2>data-*</h2> <div id="div1" data-student-name="Tom" data-stu='{"a":1,"b":2}'></div> <button onclick="addData()">添加數據</button> <button onclick="getData()">獲取數據</button> <script type="text/javascript"> var div1=document.getElementById("div1"); function addData() { //給div1添加屬性data-student-name，值爲rose div1.setAttribute("data-student-name","Rose"); $("#div1").data("stu-mark","99分"); } function getData() { //原生JavaScript //alert(div1.getAttribute("data-student-name")); //jQuery alert($("#div1").data("student-name")); alert($("#div1").data("stu").a); alert($("#div1").data("stu-mark")); } var x="{a:1}"; alert(eval("("+x+")").a); </script> </body> </html>
1.6、placeholder佔位屬性
這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,除了Firefox,其他標準瀏覽器都能很好的支持
<input placeholder="請輸入用戶名"><p> <label>郵箱：</label> <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/> </p>
1.7、required必填屬性
約束表單元在提交前必須輸入值。
<p> <label>百度：</label> <input type="url" name="baidu" id="baidu" value="" required="required"/> </p>
1.8、pattern正則屬性
約束用戶輸入的值必須與正則表達式匹配。
<p> <label>帳號：</label> <input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符 </p>
1.9、autofocus自動聚焦屬性
<p> <label>博客：</label> <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/> </p>
讓指定的表單元素獲得焦點。
1.10、autocomplete自動補全屬性
當表單元素設置了自動完成功能後，會記錄用戶輸入過的內容，雙擊表單元素會顯示歷史輸入。
<input type="text" name="username" autocomplete="on/off" />該屬性默認是打開的。
1.11、novalidate不驗證屬性
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
<form action="demo_form.asp" method="get" novalidate="true"> <button formnovalidate="formnovalidate" >提交</button>
1.12、multiple多選屬性
multiple 屬性規定輸入域中可選擇多個內容，如：email 和 file
<input type="file" multiple="multiple” /><p> <label>相片：</label> <input type="file" multiple="multiple"/> </p>
<html> <head> <meta charset="UTF-8"> <title>HTML5新的表單元素</title> </head> <body> <h2>HTML5新的表單元素</h2> <form> <p> <label>姓名：</label> <input type="text" required="required"/> </p> <p> <label>相片：</label> <input type="file" multiple="multiple"/> </p> <p> <label>帳號：</label> <input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符 </p> <p> <label>郵箱：</label> <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/> </p> <p> <label>博客：</label> <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/> </p> <p> <label>生日：</label> <input type="date"> </p> <p> <label>身高：</label> <input type="number" max="226" min="80" step="10" value="170" /> </p> <p> <label>膚色：</label> <input type="color" onchange="document.bgColor=this.value" /> </p> <p> <label>體重：</label> <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/> <span id="rangeValue"></span> </p> <button formnovalidate="formnovalidate">提交</button> <script type="text/javascript"> function showValue(val){ document.getElementById("rangeValue").innerHTML=val; } </script> </form> </body> </html>
二、HTML5表單新功能解析
HTML表單一直都是Web的核心技術之一，有了它我們才能在Web上進行各種各樣的應用,才能和服務器進行方便快捷的交互。HTML5 Forms新增了許多新控件及其API，方便我們做更復雜的應用，而不用藉助其它前端腳本語言(如:javascript),極大的解放了我們的雙手。
2.1、表單結構更自由
在HTML5中表單完全可以放在頁面任何位置，然後通過新增的form屬性指向元素所屬表單的id值，即可關聯起來。
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 姓名：<input type="text" name="realname" form="form1"/> <form id="form1" method="get"> <button>提交</button> </form> </body> </html>
運行結果：
2.2、表單重寫屬性
表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。表單重寫屬性有：formaction - 重寫表單的 action 屬性formenctype - 重寫表單的 enctype 屬性formmethod - 重寫表單的 method 屬性formnovalidate - 重寫表單的 novalidate 屬性formtarget - 重寫表單的 target 屬性
示例：
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 姓名：<input type="text" name="realname" form="form1"/> <form id="form1" method="get"> <button formmethod="get" formaction="d01.html">get提交給d01.html</button> <button formmethod="post" formaction="d02.html">post提交d02.html</button> </form> </body> </html>
2.3、郵箱與URL輸入
email輸入類型外表與文本框一樣，但在移動端運行時將切換對應的輸入鍵盤，約束格式
格式：
<input type="email" />url輸入類型說明：上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://.格式：
<input type= "url">示例代碼：
<html> <head> <meta charset="UTF-8"> <title>HTML5新的表單元素</title> </head> <body> <h2>HTML5新的表單元素</h2> <form> <p> <label>郵箱：</label> <input type="email" name="mail" id="mail" value="" /> </p> <p> <label>博客：</label> <input type="url" name="blog" id="blog" value="" /> </p> <button>提交</button> </form> </body> </html>
2.4、日期時間相關輸入類型
提供日曆控件,但目前只有Opera/Chrome新版本支持,且展示效果也不一樣..
<input type=date> <inputtype=time> <input type=month> <input type=week> <input type=datetime> <input type=datetime-local/>
<p> <label>生日：</label> <input type="date"> </p>
2.5、數字輸入類型
實現一個數字輸入框，輸入不了非數字字符。
<input type="number" max=10 min=0 step=1 value=5/>max number 規定允許的最大值min number 規定允許的最小值step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）value number 規定默認值
<p> <label>身高：</label> <input type="number" max="226" min="80" step="10" value="168" /> </p>
必須輸入數字，且數字的大小要介於指定的範圍。
2.6、range滑塊類型
特定值的範圍的數值，以滑動條顯示
<input type="range" max=10 min=0 step=1 value=5/>max number 規定允許的最大值min number 規定允許的最小值step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）value number 規定默認值
<p> <label>體重：</label> <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/> <span id="rangeValue"></span> </p> <button>提交</button> <script type="text/javascript"> function showValue(val){ document.getElementById("rangeValue").innerHTML=val; } </script>
默認沒有顯示值，需要使用javascript手動顯示。
2.7、搜索輸入類型
此類型表示輸入的將是一個搜索關鍵字,可顯示一個搜索小圖標。
<input type=search>在Chrome中右邊會出現有一個清除符號。
2.8、電話輸入類型
此類型要求輸入一個電話號碼,但實際上它並沒有特殊的驗證,與text類型沒什麼區別.
<input type=tel>在移動端會彈出輸入數字的鍵盤。
2.9、color輸入類型
此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,並反饋到該控件的value值中