HTML5新增屬性和表單元素
一、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 屬性：
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>相關推薦
HTML5新增屬性和表單元素
HTML5新增屬性與表單元素一、HTML5新增屬性1.1、contextmenucontextmenu的作用是指定右鍵選單。<!DOCTYPE html> <html> <head> <meta charset
HTML5（二）——特殊符號、新增屬性、表單重寫屬性、
枚舉值 mac a-z nova ride prevent edit wid inf 一、HTML5 特殊符號   ：空格 >：大於號 > &It ：小於號 < " ：引號”
HTML5的表單新增屬性和元素
1 表單新增屬性 1.1 表單內元素的 form 屬性 （1）作用 在HTML4中，表單內的從屬元素必須書寫在表單內部，而在HTML5中，可以把他們書寫在頁面的任何地方，然後為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以宣告該元素從屬於指定表單了。 <form
html5新增表單控件和表單屬性
tps 特性 普通 mit form表單 pan 頁面 inpu data 新的輸入性表單控件: email：電子郵箱文本框,跟普通的沒什麽區別 - 當輸入不是郵箱的時候,驗證不通過 - 移動端的鍵盤會發生變化 tel：電話號碼 url：網頁
從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性
器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
表單補充，labed標籤，html5新增表單元素和語義
<h2>label標籤的使用</h2> <!--label標籤給予人們友好的操作，選中時，點中文字時自動選中文字框--> <label>使用者名稱:<input type="text"></la
HTML的筆記及展示（2）（表單元素、input元素、label、button以及HTML5新增的一些元素）
一、HTML原有的表單與表單控制元件 1.****<form…/>元素用於生成輸入表單，該元素不會生成視覺化部分。如單行文字框、多行文字框、單選按鈕、複選框等都需要放在<form…/>元素內 form元素的重要屬性： action：指定當單擊表單內的"確認"按鈕時
JQuery 設定 表單元素的 readonly 和 disabled 屬性
在做系統的時候使用到了Jquery 來控制元素 可讀屬性，所以就歸納了下，簡單稱述以供參考。 readonly 相關使用： $('input').attr("readonly","readonly")//將input元素設定為readonly $('input').remo
HTML5基礎知識匯總_(2)自己定義屬性及表單新特性
一行 當前 down js日期 日期 mark 定義 ++ bing 自己定義屬性data-* 說起這個屬性,事實上如今非經常見了;怎麽說呢,由於在一些框架都能看到他的身影!!! 比方Jquery mobile,裏面非常頻繁的使用了這個屬性; 這個
在htnl中，<input tyle = "text">除了text外還有幾種種新增的表單元素
tab ear 帶時區 ext 內容 body lsp email 正則表達 input標簽新增屬性 <input list=‘list_t‘ type="text" name=‘user‘ placeholder=‘請輸入姓名‘ value=""
PHP 通過設置表單元素name屬性生成數組
log 判斷 存儲 move 括號 是否 res 查詢 數據表 <form method="post" action="<?php $_SERVER[‘PHP_SELF‘]; ?>"> //使用自引用表單，$_SERVER[‘PHP_SELF‘]變
4.表單，表單元素，表單元素寫法及屬性
method 密碼 mit gen 通用 元素 readonly res 方式 表單： 標簽名： 1、form （表單） action（路徑 ) method （提交方式） 2、method（提交方式
layui 對頁面新增表單元素樣式不顯示問題？
工作需要，經常用到layui ，經常會遇到對新增表單元素頁面不顯示樣式的的坑，其實很簡單，一個思路： 在你新增元素下面重新整理一下表單就行：form.render(); 比如說：layui.open({ }) ; 在後面增加 form
jquery validate 對動態表單元素新增校驗
形如有如下表單元素： .... <input type="text" ....> <input type="text" ....> <input type="text" ....> <input type="text" ....&g
vue中動態繫結表單元素的屬性
在vue中有時候可能想像使用jq一樣給某個元素新增屬性，如 $('#select1').attr('disabled','disabled') 這種方法也能實現，但是在vue中能用vue的方法還是儘量不要使用jq 使用vue的方法來新增屬性可以這樣：
html5 表單元素
1.概念 表單是蒐集使用者資訊的各種表單元素的集合區域; 2.表單的作用 a.實現網頁上的資料互動; b.蒐集客戶端輸入的資料資訊，提交到網站伺服器端進行處理;
表格和表單、表單的基本結構、表單元素、表單的高階應用、表單語義化
技能目標 掌握表格的基本用法 掌握表單的用法 掌握CSS的高階選擇器的用法 表格的基本結構 <table> 行 <tr> 列 單元格 <td> 表
AngularJS 中，通過 radio來控制元素的顯示和隱藏，以及控制表單元素的 disabled
程式碼如下 <lable> <input type="radio" ng-value="true" name="radio-test" ng-model="radioVal
HTML5 表單元素
======================================================注：本文原始碼點此下載 ======================================================html5擁有若干涉及表單的元
jQuery獲取,遍歷和操作表單元素Select,checkbox,radio
jQuery獲取Select選擇的Text和Value: 語法解釋： 1. $("#select_id").change(function(){//code...}); //為Select新增事件，當選擇其中一項時觸發 2. var checkText=$("#sel