HTML5 总结 （1）
HTML5新表单
1.Input 新类型：email url tel number range date color date week month.......
<html> <body> <form> email:<input type="email"/><br><br> url:<input type="url"/><br><br> 电话号码效果：（手机端）<input type="tel"><br><br> 数字类型：<input type="number"step="2"min="0" max="100"/><br><br> 范围类型：<input type="range"min="0"max="10"value="3" />10<br><br> 颜色类型：<input type="color" /><br><br>
<input type="submit"> </form> </body> </html>
<html> <head> <meta charset="utf-8"> <link href="photo.css" type="text/css" rel="stylesheet" /> <script></script> <title>html5 input新类型2</title> </head> <body> <form> 日期<input type="date"><br><br> 星期<input type="week"><br><br> 月份<input type="month"><br><br> <input type="submit"><br> </form> </body> </html>
2.input 新类型小案例：-----调色板
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="photo.css" type="text/css" rel="stylesheet" /> <style> div{ width:150px; height:150px; border:1px solid red; } </style> <title>input新类型range案例----调色板</title> </head> <body> <div id="d"></div><br><br> 红<input type="range"id="r"min="0"max="255"value="255"onchange="mychange()"><br><br> 蓝<input type="range"id="b"min="0"max="255"value="255"onchange="mychange()"><br><br> 绿<input type="range"id="g"min="0"max="255"value="255"onchange="mychange()"><br><br> <script> function mychange(){ var r=document.getElementById("r").value; var b=document.getElementById("b").value; var g=document.getElementById("g").value; var d=document.getElementById("d"); d.style.background="rgb("+r+","+g+","+b+")"; } </script> </body> </html>
运行效果图： |
3.表单新元素：datalist progress meter output
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="photo.css" type="text/css" rel="stylesheet" /> <script></script> <title>表单新元素</title> </head> <body> <select> <option>请选择</option> <option>北京</option> <option>天津</option> <option>上海</option> </select> <datalist id="mylist"> <option>北京</option> <option>天津</option> <option>上海</option> </datalist> <input type="text"list="mylist"><br><br> <progress max="100"value="30"id="progress"></progress><br><br> <meter min="0"max="100"value="20"low="20"height="90"></meter><br><br> <script> function mychange(){ var progress=document.getElementById("progress"); var value=progress.value; value++; progress.value=value; var t=setTimeout(mychange,100); if(value==100){ clearTimeout(t); } } mychange(); </script> </body> </html>
4.表单新属性：placeholder--提供默认提示内容；
multiple---允许输入多个值
autofocus---自动获取焦点
form--允许表单元素定义在表单之外。
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="photo.css" type="text/css" rel="stylesheet" /> <script></script> <title>表单新属性</title> </head> <body> <form> 用户名：<input type="text"placeholder="请输入用户名"><br><br> email：<input type="email"multiple><br><br><!-- 允许输入多个值 --> 文本框：<input type="text"autofocus><br><br><!-- 自动获取焦点 --> <input type="submit"> </form> </body> </html>
5 表单新验证！！！
验证属性：required属性：验证当前元素值为空。
pattern属性：使用正则表达式验证当前元素是否为空。
min和max属性：验证当前元素最小值或者最大值，一般用于number range 等元素。
minlength和maxlength属性：minlength 验证当前元素的最小长度，输入值时，允许输入小于指定值，提交表单时，验证元素值的最小长度，注意！！minlength并不是html5的新属性。
maxlength验证当前元素值的最大长度，输入值时，长度不能大于指定值。
validity属性，表单验证html5提供一种有效状态。有效状态通过validityState对象获取到。
验证有效状态：
validityState对象提供了一系列的有效状态，通过，这些有效状态，进行判断，注意！！！所有验证状态，必须配合上述的验证属性使用。
验证状态：
valid ：判断当前元素值是否正确， 返回true 和false。
valueMissing：判断当前元素值是否为空，配合required属性使用。
typeMismatch：判断当前元素值的类型是否匹配 配合email number URL 等使用。
patternMismatch：判断当前元素值是否与指定正则表达式匹配。配合pattern属性使用。
tooLong：判断当前元素值的长度是否正确 配合maxlength属性
* 注意
* 使用maxlength属性后,实际不可能出现长度大于maxlength的值
* tooLong很难出现这种情况
rangeUnderflow：判断当前元素值是否小于min属性值 配合min属性 并不能与max属性值进行比较。
stepMismatch：判断当前元素值是否与step设置相符 配合step使用 并不能与min或max属性值进行比较。
customError：配合setCustomValidity()方法 如果使用该方法,该状态返回true
setCustomValidity()方法 设置自定义的错误提示内容 使用该方法设置错误信息 当输入正确时,调用该方法将信息设置为空("") 不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)
setCustomValidity()方法：作用 - 修改验证错误后的默认提示信息 <!DOCTYPE html> <html> <head> <title>setCustomValidity()方法</title> <meta charset="utf-8" /> </head> <body> <form> 用户名:<input type="text" id="user" required> <input type="submit"> </form> <script> /* * setCustomValidity()方法 * * 作用 - 修改验证错误后的默认提示信息 * * 问题 * * 一旦使用该方法修改默认错误提示信息后 * 即使输入正确,错误提示依旧存在(逻辑错误) * * 解决 * * 判断如果用户输入正确的话,将该方法设置提示内容修改为空 * * 问题 * * 使用valid状态判断输入是否正确 * * 一旦使用该方法,validityState对象的所有状态都返回false */ var user = document.getElementById("user"); user.onblur = function(){ //user.value == "" || user.value == null if(user.value != "" && user.value != null){ user.setCustomValidity(""); }else if(user.validity.valueMissing){ user.setCustomValidity("用户名不能为空"); } } </script> </body> </html>
6 新表单验证完整案例1！！！！
<!DOCTYPE html> <html> <head> <title>表单验证状态(完整)</title> <meta charset="utf-8" /> </head> <body style="text-align:center"> <form> 用户名:<input type="text" id="user" required><br> email地址:<input type="email" id="email"><br> 密码:<input type="text" id="pwd" pattern="^[a-zA-Z]{6,12}$"><br> 确认密码:<input type="text" id="repwd" maxlength="10"><br> 年龄:<input type="number" id="age" min="10" max="20"><br> 成绩:<input type="number" id="score" min="60" max="100" step="10"><BR> <video width="500px"height="300"style="background:black"controls loop poster="../Day02/素材/oceans-clip.png"> <source src="../Day02/素材/oceans-clip.mp4"> <source src="../Day02/素材/oceans-clip.ogv"> <source src="../Day02/素材/oceans-clip.webm"> </video><br><br> <input type="submit" value="注册"> </form> <script> var user = document.getElementById("user"); user.onblur = function(){ if(user.validity.valueMissing){ console.log("用户名不能为空."); } } var email = document.getElementById("email"); email.onblur = function(){ if(email.validity.typeMismatch){ console.log("email输入格式错误."); } } var pwd = document.getElementById("pwd"); pwd.onblur = function(){ if(pwd.validity.patternMismatch){ console.log("密码输入错误."); } } var repwd = document.getElementById("repwd"); repwd.onblur = function(){ if(repwd.validity.tooLong){ console.log("密码输入过长."); } } var age = document.getElementById("age"); age.onblur = function(){ if(age.validity.rangeUnderflow){ console.log("年龄过小,不符合!"); } } var score = document.getElementById("score"); score.onblur = function(){ if(score.validity.valid){ console.log("成绩输入正确."); }else if(score.validity.stepMismatch){ console.log("成绩输入不符."); } } </script> </body> </html>
7 6 新表单验证完整案例2！！！！
<!DOCTYPE html> <html> <head> <title>表单新验证案例</title> <meta charset="utf-8" /> </head> <body> <fieldset> <legend>用户注册页面</legend> <form> <table> <tr> <td>用户名:</td> <td><input type="text" autofocus placeholder="请输入用户名"id="user"required pattern="^[a-zA-Z]{6,12}$"></td> </tr> <tr> <td>密码:</td> <td><input type="password" placeholder="请输入密码"id="pwd"required pattern="^[a-zA-Z]{6,8}$"></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" placeholder="请确认密码"id="repwd"required pattern="^[a-zA-Z]{6,8}$"></td> </tr> <tr> <td>email地址:</td> <td><input type="email" placeholder="请输入email"id="email"required></td> </tr> <tr> <td>个人主页:</td> <td><input type="url" placeholder="请输入个人主页"id="pon"required></td> </tr> <tr> <td>年龄:</td> <td><input type="number" min="0" max="100" placeholder="请输入个人主页"id="age"required></td> </tr> <tr> <td>出生日期:</td> <td><input type="date"id="date"></td> </tr> <tr> <td></td> <td><input type="submit" value="注册"></td> </tr> </table> </form> </fieldset> <script> /* * 需求 * * 用户名 * * 验证条件 - 不能为空,只能输入英文+数字,长度在6-12之间 * * 条件 - 验证失败,重新设置错误提示 * * 密码 * * 验证条件 - 不能为空,只能输入英文,长度在6-8之间 * * 条件 - 验证失败,重新设置错误提示 * * 确认密码 * * 验证条件 - 不能为空,只能输入英文,长度在6-8之间(两次密码输入一致) * * 条件 - 验证失败,重新设置错误提示 * * email地址 * * 验证条件 - 不能为空,类型符合 * * 条件 - 验证失败,重新设置错误提示 * * 个人主页 * * 验证条件 - 不能为空,类型符合 * * 条件 - 验证失败,重新设置错误提示 * * 年龄 * * 验证条件 - 不能为空,值不能小于min,step符合 * * 条件 - 验证失败,重新设置错误提示 * * 出生日期 * * 验证条件 - 不能为空 * * 条件 - 验证失败,重新设置错误提示 * * 统一要求 * * 所有元素验证通过,给出正确提示 */ var user = document.getElementById("user"); user.onblur = function(){ user.onblur = function(){ if(user.validity.valueMissing){ alert("用户名不能为空."); }else if(user.validity.patternMismatch){ alert("用户名格式不正确"); } } var pwd=document.getElementById("pwd"); pwd.onblur = function(){ if(pwd.validity.valueMissing){ alert("密码不能为空."); }else if(pwd.validity.patternMismatch){ alert("密码格式不正确"); } } } var repwd=document.getElementById("repwd"); repwd.onblur = function(){ if(repwd.value!=pwd.value){ alert("两次密码不一致"); } } var email = document.getElementById("email"); email.onblur = function(){ if(email.validity.typeMismatch){ console.log("email输入格式错误."); } } </script> </body> </html>
后续的HTML内容会持续更新．．．．．．．．．．Ｏ．Ｏ ＝．＝
