HTML5秘籍--Forms

HTML5秘籍书籍在表单部分总结了表单检测浏览器对表单验证属性placeholder、autofocus、required、max、min和step的支持的要点。autofocusautofocus，刷新页面会自动聚焦当前inputName*
stepstep属性指定了输入域的合法数字区间（如果step="3"，则合法数字应该是-3、0、3、6等）。关闭验证#关闭表单#绕过验证validationhook#requiredrequiredinput:required{background-color:lightyellow;}#invalid未通过验证样式input:required:invalid{background-color:lightyellow;}#valid未通过验证样式input:required:valid{background-color:red;}使用正则表达式吧不一定要用^和$字符来表示要匹配的字段值的开始和结束。HTML5会自动确保这一点。实际上，这意味着正则表达式匹配字段中的完整值，并验证整个值的有效性PromotionCode自定义验证你什么时候第一次知道你想成为一名动物园管理员？这里，onInput事件会触发一个叫做validateComments()的函数。这个函数的代码是自己写的，主要是检测元素的值，然后调用setCustomValidity()方法。如果当前值有问题，则需要在调用setCustomValidity()方法时提供错误消息。否则，如果当前值没有问题，调用setCustomValidity()方法时传入一个空字符串即可；这将清除先前设置的自定义错误消息。functionvalidateComments(input){if(input.value.length<20){input.setCustomValidity("您需要更详细地评论。");}else{//没有错误。清除任何错误信息input.setCustomValidity("");}}提交表单检测需要为表单的onSubmit事件定义一个处理函数，返回true（表示验证通过，可以提交表单）或false（表示验证失败，浏览器可以提交表单）)根据情况应该取消提交操作)#js下面是一个简单的例子，演示了必填字段的自定义验证代码:functionvalidateForm(){if(!Modernizr.input.required){//不支持required属性，因此您需要自己检查//必填字段。//首先，获取一个包含所有元素的数组。varinputElements=document.getElementById("zooKeeperForm").elements;console.log(inputElements)//接下来，遍历该数组，检查每个元素。for(vari=0;i
JavaScript可以用来响应滑块的变化事件（即处理onChange事件)datetimedatehttp://prosetech.com/html5/Ch...您可以使用进度条和仪表条的新图形小部件就是和，这两个元素外观相似但功能不同。progress适用于百分比定位#0.25可以表示完成了25%的进度：#etc.价格为##不确定的滚动条Taskinprogress...meter称为meter一般来说，给定元素设置的值，会对应到中的某个值现实（例如，金钱数额、天数或体重）。为了控制元素如何显示此数据，您需要设置最大值和最小值（使用max和min属性）28磅为了让元素能够表示那些“太高”或“太低”的值，并且恰当地表达它们，你需要使用low和high属性你的行李箱重量：79磅*

*超过70磅的行李箱需支付附加费。