html新的语义化标签和表单控件
语义化标签
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>新增的语义化标签</title> 6 </head> 7 <body> 8 <header>页面头部或某个板块的头部</header> 9 <footer>页面底部或某个板块的底部</footer> 10 <nav>导航</nav> 11 12 <hgroup> 13 <h1>页面上的标题组合</h1> 14 <h1>页面上的标题组合</h1> 15 </hgroup> 16 17 <section>页面上的一个区块或板块</section> 18 19 <article>页面上一套结构完整且独立的内容（一篇文章、一条帖子）</article> 20 <aside>与article相关的附属信息</aside> 21 22 <figure>用于对媒体元素进行组合</figure> 23 <figcaption>figure的子元素对figure的内容进行说明</figcaption> 24 <figure> 25 <figcaption>黄浦江上的的卢浦大桥</figcaption> 26 <img src="bridge.jpg" /><!-- 不用alt属性了 --> 27 </figure> 28 29 <time datetime="2015-02-14">时间</time> 30 31 <datalist>与input配合表示input可能出现的值</datalist> 32 <input type="text" list="valList"/> 33 <datalist id="valList"> 34 <option value="js">js</option> 35 <option value="cs">cs</option> 36 <option value="hm">hm</option> 37 </datalist> 38 39 <details>详细信息配合summary使用</details> 40 <details open="open"> 41 <summary>html</summary> 42 <p>超文本标记语言</p> 43 </details> 44 45 <dialog>定义一段对话</dialog> 46 <dialog open="open"> 47 <dt>老师</dt> 48 <dd>1+1=？</dd> 49 <dt>学生</dt> 50 <dd>2</dd> 51 <dt>老师</dt> 52 <dd>正确</dd> 53 </dialog> 54 55 <address>定义文章或页面作者的详细联系地址</address> 56 <mark>标记</mark> 57 58 <keygen /> 59 60 <progress>进度条</progress> 61 <progress max="100" value="30"></progress> 62 <progress max="100" value="30"> 63 <span>向下兼容30</span>% 64 </progress> 65 </body> 66 </html>
兼容低版本的IE的方法：
通过document.createElement()并修改display为相应的值就行。
在head中导入html5shiv.js文件。
表单控件
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>新增表单元素和属性</title> 6 </head> 7 <body> 8 <form action="#"> 9 <p><input type="email" placeholder="邮箱"/></p> 10 <p><input type="tel" placeholder="电话"/>键盘切换</p> 11 <p><input type="url" placeholder="网址"/></p> 12 13 <p><input type="search" placeholder="搜索"/>输入内容后表单后面会出现小x，IE中所有的表单输入内容后都会出现小x</p> 14 15 <p><input type="range" step="1" min="0" max="10" value="2"/></p> 16 17 <p><input type="number"/>数字调节</p> 18 <p><input type="color"/>颜色选择器</p> 19 20 <p><input type="datetime"/>有日期选择器</p> 21 <p><input type="datetime-local"/>有日期选择器</p> 22 <p><input type="time"/>选择小时分钟</p> 23 <p><input type="date"/>有日期选择器</p> 24 <p><input type="week"/>有日期选择器</p> 25 <p><input type="month"/>有日期选择器</p> 26 27 <p>属性：</p> 28 <p><input type="text" placeholder="提示信息"/>表单提示信息</p> 29 <p><input type="text" autocomplete="true" name="age"/>是否保存用户输入值来进行自动提示</p> 30 <p><input type="text" autofocus/>自动获得焦点</p> 31 <p><input type="text" list="datalist的id"/></p> 32 <p><input type="text" required/>选项不能为空</p> 33 <p><input type="text" pattern="正则"/>正则验证</p> 34 35 <p><input type="submit" value="保存到草稿箱" formaction="cao.php"/></p> 36 <p><input type="submit" value="保存" formaction="save.php"/></p> 37 38 <p><input type="submit" value="提交"/></p> 39 </form> 40 </body> 41 </html>
表单验证
validity对象：
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>表单验证</title> 6 </head> 7 <body> 8 <form action="#"> 9 <input type="text" required id="text"/> 10 <input type="submit" value="提交"/> 11 </form> 12 </body> 13 <script> 14 var oText = document.getElementById('text'); 15 16 // 添加自定义验证 17 oText.onInput = function(){ 18 if(this.value == 'hello'){ 19 this.setCustomValidity('请不要输入hello'); 20 }else{ 21 this.setCustomValidity(''); // 验证通过一定要清空 22 } 23 }; 24 25 oText.addEventListener('invalid', function(e){ 26 console.log(this.validity); 27 console.log(this.validity.valid); // 验证结果 下面的都返回false时为true 28 console.log(this.validity.valueMissing); // 验证required 为空为true 29 console.log(this.validity.typeMismatch); // 验证type的匹配 不匹配为true 30 console.log(this.validity.patternMismatch); // 验证正则 不匹配返回true 31 console.log(this.validity.tooLong); // 验证maxlength 超过返回true 32 console.log(this.validity.rangeUnderflow); // 验证range的最小值 低于最小值返回true 33 console.log(this.validity.rangeOverflow); // 验证range的最大值 超过最大值返回true 34 console.log(this.validity.stepMismatch); // 验证range的步长 不满足步长返回true 35 console.log(this.validity.customError); // 验证自定义验证 不符合自定义验证返回true 36 37 e.preventDefault(); 38 }, false); 39 </script> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>表单验证</title> 6 </head> 7 <body> 8 <form action="#"> 9 <input type="text" required id="text"/> 10 <input type="submit" formaction="sub.php" value="提交"/> 11 <input type="submit" formaction="cao.php" formnovalidate value="草稿箱"/>formnovalidate关闭验证 12 </form> 13 </body> 14 </html>
