HTML5秘籍书籍中表单局部进行要点演绎
表单
检测浏览器对表单验证反对状况的属性
placeholder、autofocus、required、max、min和step。
autofocus
主动对焦, 刷新页面会主动对焦到以后input
<label for="name">Name <em>*</em></label><input id="name" placeholder="Jane Smith" autofocus><br>step
step 属性规定输出字段的非法数字距离（如果 step="3"，则非法数字应该是 -3、0、3、6，以此类推）。
敞开验证
# 表单敞开<form id="zooKeeperForm" action="processApplication.cgi" novalidate># 绕过验证<input type="submit" value="Save for Later" formnovalidate>验证挂钩
# required必填input:required { background-color: lightyellow;}# invalid没通过验证款式input:required:invalid { background-color: lightyellow;}# valid没通过验证款式input:required:valid { background-color: red;}应用正则表达式
不用应用^和$字符示意要匹配字段值的结尾和结尾。HTML5会主动确保这一点。实际上，这就是说正则表达式匹配的是字段中残缺的值，验证的也是整个值的有效性
<label for="promoCode">Promotion Code</label><input id="promoCode" placeholder="QRB-001" title= "Your promotion code is three uppercase letters, a dash, then three numbers" pattern="[A-Z]{3}-[0-9]{3}">自定义验证
<label for="comments">When did you first know you wanted to be a zookeeper? </label><textarea id="comments" oninput="validateComments(this)" ></textarea>这里，onInput事件会触发一个名为validateComments()的函数。这个函数的代码是你本人写的，次要是检测<input>元素的值，而后调用setCustomValidity()办法。
如果以后值有问题，那么在调用setCustomValidity()办法时就须要提供一条谬误音讯。否则，如果以后值没有问题，调用setCustomValidity()办法时只有传入空字符串即可；这样会革除以前设置过的自定义谬误音讯。
function validateComments(input) { if (input.value.length < 20) { input.setCustomValidity("You need to comment in more detail."); } else { //没有谬误。革除任何谬误音讯 input.setCustomValidity(""); }}提交表单检测
须要为表单的onSubmit事件定义处理函数，依据状况返回true（示意验证通过，能够提交表单）或false（示意验证未通过，浏览器应该勾销提交操作）
<form id="zooKeeperForm" action="processApplication.cgi" onsubmit="return validateForm()"># js 以下是一个简略的示例，演示了针对一个必填字段的自定义验证代码：function validateForm() { if (!Modernizr.input.required) { // The required attribute is not supported, so you need to check the // required fields yourself. // First, get an array that holds all the elements. var inputElements = document.getElementById("zooKeeperForm").elements; console.log(inputElements) // Next, move through that array, checking eaching element. for(var i = 0; i < inputElements.length; i++) { // Check if this element is required. if (inputElements[i].hasAttribute("required")) { // If this elemnent is required, check if it has a value. // If not, the form fails validation, and this function returns false. if (inputElements[i].value == "") { alert("Custom required-field validation failed. The form will not be submitted."); return false; } } } // If you reach this point, everything worked out and the browser // can submit the form. return true; }}表单节点
滑动条
HTML5的另一个数值类型的控件是range。
<input id="weight" type="range" min="50" max="1000" value="160"><br>能够应用JavaScript响应滑动条的变动事件（即解决onChange事件）
date工夫日期
http://prosetech.com/html5/Ch...
通过该网址进行查看即可
应用<datalist>显示输出倡议
通过datalist的id属性对应input中的list
<legend>What's Your Favorite Animal? </legend><datalist id="animalChoices"> <span class="Label">Pick an option:</span> <select id="favoriteAnimalPreset"> <option label="Alpaca" value="alpaca"> <option label="Zebra" value="zebra"> <option label="Cat" value="cat"> <option label="Caribou" value="caribou"> <option label="Caterpillar" value="caterpillar"> <option label="Anaconda" value="anaconda"> <option label="Human" value="human"> <option label="Elephant" value="elephant"> <option label="Wildebeest" value="wildebeest"> <option label="Pigeon" value="pigeon"> <option label="Crab" value="crab"> </select> <br> <span class="Label">Or type it in:</span></datalist><input list="animalChoices" name="list">进度条和计量条
新图形微件是<progress>和<meter>，这两个元素外观类似，作用不同
progress
实用于百分比定位
# 能够用0.25来示意实现了进度的25%：<progress value="0.25"></progress># 等价于<progress value="50" max="200"></progress>## 不确定的滚动条<progress>Task in progress ...</progress>meter
被称为计量器。一般来说，给<meter>元素设置的值都会对应事实中的某个值（比方，钱数、天数或分量）。为了管制<meter>元素显示这些数据的形式，须要设置一个最大值和一个最小值（应用max和min属性）
<meter min="5" max="70" value="28">28 pounds</meter>为了让<meter>元素可能示意那些“过高”或“过低”的值，而且还能示意得恰到好处，就须要用到low和high属性
Your suitcase weighs:<meter min="5" max="100" high="70" value="79">79 pounds</meter>*<p><small>* A surcharge applies to suitcases heavier than 70 pounds.</small></p>Chrome对于过高的值会显示黄条
HTML编辑器
应用contenteditable编辑元素
<div id="editableElement" contenteditable="true">You can edit this text, ifyou'd like.</div>应用designMode编辑页面
与contenteditable属性相似，但designMode属性可能让用户编辑整个页面。
把要编辑的文档放在一个<iframe>元素中，而这个元素就充当了一个超级的编辑框
<iframe id="pageEditor" src="ApocalypsePage_Revised.html"></iframe><div> <button onclick="startEdit()">Start Editing</button> <button onclick="stopEdit()">Stop Editing</button> # jsfunction startEdit() { //把<iframe>转换为设计模式 var editor = document.getElementById("pageEditor"); editor.contentWindow.document.designMode = "on";}function stopEdit() { //敞开<iframe>的设计模式 var editor = document.getElementById("pageEditor"); editor.contentWindow.document.designMode = "off"; //显示编码后的HTML（仅为验证的确能够编辑） var htmlDisplay = document.getElementById("editedHTML"); htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML;}