标签：描述 表单 允许 格式 通过 之间 完整版 step order
HTML5 DAY01:
* 基本内容
* HTML5目前最新的规范(标准)是2014年10月推出
* 2005年左右出现HTML5版本(非标准)
* W3C组织(两个组织定义H5规范)
* 学习(研究)HTML5是学习未来(将来主流)
* HTML版本 - 第一阶段主要学习还是4版本(包含5版本)
<header><nav>
* HTML5版本之后,声明不再出现版本信息
* 有意地版本,以后可能不再会有新版本
* HTML5的规范内容实时更新
* 注意
* HTML5永远都不可能离开javascript.
* HTML5在移动端支持好于PC端
* HTML5新表单
* input新类型
* email类型 - 验证是否包含"@"
* url类型 - 验证是否包含"http://"
* tel类型 - 只在移动端显示
* number类型
* range类型
* date类型
* color类型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>input7种新类型</title> 6 </head> 7 <body> 8 <!--<input type="emali"/> 9 *作用-提交表单时，验证是否包含“@” 10 *问题-验证逻辑并不完整--> 11 email类型：<input type="email" /><br /> 12 搜索类型：<input type="search" /><br /> 13 <!-- 14 <input type="url" /> 15 *作用-提交表单时，验证是否包含"http//" 16 *问题-验证逻辑不完整 17 --> 18 URL类型：<input type="url" /><br /> 19 <!-- 20 描述：<input type="tel" /> 21 *注意-效果只能在手机端出现 22 --> 23 电话号码类型：<input type="tel" /><br /> 24 <!-- 25 描述：<input type="number" /> 26 *min - 最小值 27 * max - 最大值 28 * step-步长，默认值为1 29 --> 30 数字类型： <input type="submit" min="0" max="10"step="2"/><br /> 31 <!-- 32 <input type="renge" /> 33 *min-最小值 34 * max-最大值 35 * step 36 * value-当前值 37 --> 38 范围类型：<input type="range" min="0" max="10" value="8" step="2" /><br /> 39 <!-- 40 <input type="color" /> 41 *min-最小值 42 * max-最大值 43 * step 44 * value-当前值 45 --> 46 颜色类型：<input type="color" /> 47 <input type="submit" /> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>input新类型demo</title> 6 <style type="text/css"> 7 div { 8 width: 200px; 9 height: 200px; 10 border: 1px solid black; 11 background-color: rgb(); 12 } 13 </style> 14 </head> 15 <body> 16 <!-- 17 需求： 18 * 定义<div>元素 - 用于显示选择后的颜色 19 * 定义<input type="range">元素 - 用于选择颜色的三原色（红|蓝|绿） 20 * rgb(r,g,b) - 0-255 21 --> 22 <div id="d"></div> 23 <br /> 24 红：<input type="range" id="r" min="0" max="255" value="255" onchange="mychange()"/><br /> 25 蓝：<input type="range" id="g" min="0" max="255" value="255" onchange="mychange()"/><br /> 26 绿：<input type="range" id="b" min="0" max="255" value="255" onchange="mychange()"/><br /> 27 <script type="text/javascript"> 28 //当你选择红、蓝、绿三原色的不同值，在div中显示不同的颜色 29 function mychange() { 30 //1.获取红|蓝|绿的value属性值 31 var r = document.getElementById("r").value; 32 var g = document.getElementById("g").value; 33 var b = document.getElementById("b").value; 34 //2.获取div元素 35 var d = document.getElementById("d"); 36 //3.改变div元素的背景颜色 37 d.style.background ="rgb("+r+","+g+","+b+")"; 38 39 40 } 41 </script> 42 </body> 43 </html>
* 表单新元素
* datalist元素
* progress元素
* meter元素
* output元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05-表单新元素</title> 6 </head> 7 <body> 8 <!-- 9 datalist 10 *<datalist>元素 - 定义备选项（并不显示） 11 *配合<input>元素使用 12 * 定义list属性 - 属性值等于<datalist>元素的id属性值 13 *效果 - 和<select>下拉列表类似 14 *特点 - 数据与结构的分离 15 * 数据 - 预定义数据内容<datalist> 16 * 结构 - 显示在HTML页面中的元素<input> 17 *优点 - 使用<datalist>元素定义的数据可以重复使用 18 --> 19 <select name="" id=""> 20 <option value="">请选择</option> 21 <option value="">北京</option> 22 <option value="">南京</option> 23 <option value="">天津</option> 24 25 </select> 26 <br /> 27 <datalist id="mylist"> 28 <option value="">请选择</option> 29 <option value="">北京</option> 30 <option value="">南京</option> 31 <option value="">天津</option> 32 </datalist> 33 <input type="text" list="mylist"/> 34 <br /> 35 <!-- 36 <progress>元素 - 进度条 37 *max - 设置进度条的最大值 38 * 没有min属性 - 默认最小值为0 39 * value - 表示当前的进度值 40 --> 41 <progress max="100" value="0" id="progress"></progress> 42 <br /> 43 <!-- 44 <meter>元素 - 刻度 45 *min - 最小值 46 * max - 最大值 47 * value - 当前值 48 * low - 低预警值 49 * high - 高预警值 50 --> 51 <meter min="0" max="100" value="10" low="10" high="90"></meter> 52 <br /> 53 <!-- 54 <output>元素 (了解)- 输出 55 * 56 --> 57 <input type="text" id="a" />+<input type="text" id="b" /> = 58 <output for="a+b"></output> 59 60 61 <script type="text/javascript"> 62 function mychange () { 63 var progress = document.getElementById("progress") 64 var value = progress.value; 65 value++; 66 progress.value = value; 67 68 if(value == 100) { 69 clearTimeout(t); 70 } 71 /* 72 * setTimeout(code,time) 73 * eval()函数 - 将一个符合javascript语法的字符串转换成javascriot代码执行 74 75 * */ 76 t = setTimeout("mychange()",100); 77 } 78 mychange(); 79 </script> 80 </body> 81 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action="" id="myform"> 9 <!-- 10 placeholder属性 11 *作用 - 类似于value属性 12 * 区别 13 * value属性值 14 * 显示为黑色 15 * 确实存在文本框中 16 * placeholder属性值 17 *显示为灰色 18 * 类似于背景存在 19 --> 20 <input type="text" value="请输入您的用户名" /> 21 <br /><br /> 22 <input type="text" placeholder="请输入您的用户名" /> 23 <br /><br /> 24 25 <!-- 26 multiple属性 27 *作用 - 允许输入多个值 28 * 注意 - 多个值之间使用“，” 29 * 用法 - 只定义属性不定义属性值 30 --> 31 <input type="email" multiple /> 32 33 <br /><br /> 34 35 <!-- 36 autofocus属性 37 *作用 - 自动获取焦点 38 * 用法 - 只定义属性名。没有属性值 39 --> 40 <input type="text" autofocus /> 41 <br /><br /> 42 <input type="submit" /> 43 </form> 44 45 <!-- 46 form属性 47 *原本的HTML页面中定义表单元素 48 * 所有的表单元素，必须定义在<form>元素中 49 * 作用 - 允许将表单元素定义在<form>元素外 50 * <form>元素外的表单元素，使用该属性 51 * <form>属性值等于<form>元素的id属性值 52 --> 53 <input type="password" id="pwd" form="myform" /> 54 55 56 57 58 </body> 59 </html>
* 表单新属性
* placeholder - 提供默认提示内容
* multiple - 允许输入多个值
* 多个值之间使用","
* autofocus - 自动获取焦点
* form - 允许表单元素定义在表单之外
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action=""> 9 用户名：<input type="text" id="user" required/><br /> 10 密码框：<input type="text" id="pwd" pattern="[a-zA-z]{6,12}$" /><br /> 11 年龄：<input type="number" min="0" max="100"/><br /> 12 email地址: <input type="text" minlength="6" maxlength="10"/> 13 14 <input type="submit" /> 15 </form> 16 </body> 17 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证属性案例</title> 6 </head> 7 <!-- 8 统一需求 9 *所有的元素增加默认提升，使用placeholder属性 10 * 用户自动获得焦点 11 具体要求 12 *用户名 -不能为空，只能输入英文+数字，长度6-12之间 13 * 密码 - 不能为空，只能输入英文，长度6-8之间 14 * 确认密码 - 与密码要求一致，验证两次密码输入的是否一致 15 * 年龄 - 不能为空，，年龄从1-100 16 * 出生日常 - 不能为空 17 * email - 不能为空 18 * 个人主页 - 不能为空 19 --> 20 <body> 21 <fieldset id=""> 22 <legend>用户注册页面</legend> 23 <form action="" method="post"> 24 <table> 25 <tr> 26 <td>用户名：</td> 27 <td><input type="text" id="user" placeholder="请输入用户名"autofocus required pattern=" ∧[a-zA-Z0-9]{6,12}$" /></td> 28 </tr> 29 <tr> 30 <td>密码：</td> 31 <td><input type="password" id="pwd" placeholder="请输入密码" required pattern=" ∧[a-zA-Z0-9]{6,12}$"/></td> 32 </tr> 33 <tr> 34 <td>确认密码：</td> 35 <td><input type="text" id="repwd" placeholder="请输入确认密码" required pattern=" ∧[a-zA-Z0-9]{6,12}$"/></td> 36 </tr> 37 <tr> 38 <td>年龄：</td> 39 <td><input type="number" id="age" placeholder="请输入年龄" required / min="0" max="100"></td> 40 </tr> 41 <tr> 42 <td>出生日期：</td> 43 <td><input type="date" id="birth" /></td> 44 </tr> 45 <tr> 46 <td>email地址：</td> 47 <td><input type="email" id="email" placeholder="请输入email地址" required/></td> 48 </tr> 49 <tr> 50 <td>个人主页：</td> 51 <td><input type="url" id="url" placeholder="请输入个人主页地址" required/></td> 52 </tr> 53 <tr> 54 <td>提交：</td> 55 <td><input type="submit" value="注册" placeholder=""/></td> 56 </tr> 57 </table> 58 </form> 59 60 </fieldset> 61 </body> 62 </html>
* 表单新验证
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>09-表单验证状态</title> 6 </head> 7 <body> 8 <!-- 9 <form action="" onsubmit="return formValiadator()"> 10 用户名：<input type="text" id="user" /> 11 <input type="subimit" value="注册"/> 12 </form> 13 <script> 14 function formValiadator() { 15 var user = document.getElementById("user"); 16 if(user.value == "" || user.value == null) { 17 console.log("用户名不能为空"); 18 } 19 } 20 </script> 21 --> 22 <!--<form action="" onsubmit="return formValidator();"> 23 用户名：<input type="text" required id="user"/> 24 <input type="submit" value="注册" /> 25 26 </form> 27 28 <script type="text/javascript"> 29 /* 30 * formValidator()方法并没有被执行 31 * *required属性 - 底层代码应该具有事件 32 * *表单提交 - 具有提交事件 33 * 注意 34 * *先触发input元素的required对应的事件 35 * *在触发onsubmit事件 36 * *经过测试，required被执行，但onsubmit事件没被触发 37 * 结论 38 * *required底层具有的事件，阻止了事件冒泡 39 * *配合required验证属性完成表单验证功能（js）,使用onsubmit事件 40 * 41 */ 42 function formValidator() { 43 var user = document.getElementById("ussser"); 44 if(user.validity.valueMissing){ 45 //对应元素值为空 46 console.log("测试"); 47 return false; 48 }else { 49 //对应元素为不空 50 } 51 } 52 </script>--> 53 54 <form> 55 用户名：<input type="text" id="user" required/> 56 <input type="submit" value="注册" /> 57 58 </form> 59 <script type="text/javascript"> 60 var user = document.getElementById("user"); 61 user.onblur = function() { 62 if(user.validity.valueMissing){ 63 console.log("用户名不能为空"); 64 } 65 } 66 </script> 67 </body> 68 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>10表单验证完整版</title> 6 </head> 7 <body> 8 <form action=""> 9 用户名：<input type="text" id="user" required /><br /> 10 11 email地址: <input type="image" id="email " /><br /> 12 密码：<input type="text" id="pwn" pattern="∧[a-zA-Z]{6-12}$" /><br /> 13 确认密码：<input type="text" id="repwd" maxlength="10"/><br /> 14 年龄： <input type="number" id="age" min="10" max="20" /><br /> 15 成绩： <input type="number" id="score" min="60" max="100" step="10"/> 16 <input type="submit" value="注册"/> 17 </form> 18 <script> 19 var user = document.getElementById("user"); 20 21 user.onblur = function() { 22 if(user.validity.valueMissing) { 23 console.log("用户名不能为空"); 24 } 25 } 26 var email = document.getElementById("email"); 27 email.onblur = function() { 28 if(eamil.validity.typeMismatch){ 29 console.log("email输入格式错误"); 30 } 31 } 32 var pwn = document.getElementById("pwn"); 33 pwn.onblur = function() { 34 if(pwn.validity.patternMismatch){ 35 console.log("密码输入错误"); 36 } 37 } 38 var repwd =document.getElementById("repwd") 39 repwd.onblur = function () { 40 if(repwd.validity.tooLong){ 41 console.log("密码输入过长"); 42 } 43 } 44 var age = document.getElementById("age"); 45 age.onblur = function(){ 46 if(age.validity.rangeUnderflow){ 47 console.log("年龄过小，不符合！") 48 } 49 } 50 51 var score = document.getElementById("score"); 52 score.onblur = function() { 53 if(score.validity.valid){ 54 console.log("成绩输入正确"); 55 } else if(score.validoty.stepMismatch) 56 console.long("成绩输入不符"); 57 } 58 59 </script> 60 </body> 61 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证综合案例</title> 6 </head> 7 <body> 8 <fieldset> 9 <legend>用户注册页面</legend> 10 <form action=""> 11 <table> 12 <tr> 13 <td>用户名：</td> 14 <td><input type="text" autofocus placeholder="请输入用户名" id="user" pattern="∧[a-zA-Z]{6-12}$" /></td> 15 </tr> 16 <tr> 17 <td>密码：</td> 18 <td><input type="password" placeholder="请输入密码" /></td> 19 </tr> 20 <tr> 21 <td>确认密码：</td> 22 <td><input type="password" placeholder="请输入确认密码" /></td> 23 </tr> 24 <tr> 25 <td>email地址：</td> 26 <td><input type="email" placeholder="请输入email"/></td> 27 </tr> 28 <tr> 29 <td>个人主页：</td> 30 <td><input type="url" placeholder="请输入个人主页" /></td> 31 </tr> 32 <tr> 33 <td>年龄：</td> 34 <td><input type="number" placeholder="请输入个人主页" /></td> 35 </tr> 36 <tr> 37 <td></td> 38 <td><input type="submit" value="注册"/></td> 39 </tr> 40 41 42 </table> 43 </form> 44 </fieldset> 45 <script> 46 /* 47 * 需求 48 * *用户名 49 * * 验证条件 － 不能为空，只能输入英文+数字，长度在６-１２之间 50 * * 条件 － 验证失败，重新设置错误提升 51 */ 52 var user = document.getElementById("user"); 53 54 user.onblur = function() { 55 if(user.value != "" && user.value == null){ 56 user.setCustomValidity(""); 57 }else 58 if(user.validity.valueMissing){ 59 user.setCustomValidity("用户名不能为空"); 60 } 61 /* 62 * 需求 63 * *用户名 64 * * 验证条件 － 不能为空，只能输入英文+数字，长度在６-１２之间 65 * * 条件 － 验证失败，重新设置错误提升 66 * 67 * *密码 68 * * 验证条件 － 不能为空，只能输入英文+数字，长度在６-１２之间 69 * * 条件－验证条件 － 验证失败，重新设置错误提示 70 * *确认密码 71 * *验证条件 － 不能为空，只能输入英文+数字，长度在６-１２之间（两次密码输入一致） 72 * *条件 － 验证失败，重新设置错误提示 73 * *ｅmail地址 74 * *验证条件 － 不能为空，类型符合 75 * *条件 － 验证失败，重新设置错误提升信息 76 * *个人主页 77 * *验证条件 － 不能为空，类型符合 78 * *条件 － 验证失败，重新设置错误提升信息 79 * *年龄 80 * *验证条件 － 不能为空，值不能小于min，step符合 81 * *条件 － 验证失败后，重新设置提示信息 82 * *出生日期 83 * * 验证条件 － 不能为空 84 * * 条件 － 验证失败，重新设置错误提示 85 * *统一要求 86 * *所有元素验证通过，给出正确提示 87 * 88 * 89 */ 90 </script> 91 </body> 92 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11-serCustomValidity()方法</title> 6 </head> 7 <body> 8 <form action=""> 9 用户名： <input type="text" id="user" required /> 10 <input type="submit" /> 11 </form> 12 <script> 13 /* 14 * serCostomValidity()方法 15 * *作用 － 修改验证错误后的默认提示信息 16 * *问题 17 * *一旦使用该方法修改默认错误提升信息后，即使输入正确，错误提升依旧存在（逻辑错误） 18 * 解决 19 * *判断如果用户名输入正确的话，将该方法设置提示内容修改为空 20 * 21 * 问题 22 * *使用valid状态判断是否输入正确 23 * *一旦使用该方法，validityState对象的所有状态都返回ｆａｌｓｅ 24 */ 25 var user = document.getElementById("user"); 26 user.onblur = function() { 27 //user.value == "" || user.value == null; 28 if(user.value != "" && user.value == null){ 29 user.setCustomValidity(""); 30 }else 31 if(user.validity.valueMissing){ 32 user.setCustomValidity("用户名不能为空"); 33 } 34 } 35 </script> 36 </body> 37 </html>
标签：描述 表单 允许 格式 通过 之间 完整版 step order
原文地址：http://www.cnblogs.com/w190/p/7375560.html
