HTML5表单元素的新特性
来源：互联网 发布：广西安全知识网络竞赛 编辑：程序博客网 时间：2024/06/04 22:58
H5表单新特性
- H5表单新特性
- 表单的新输入类型
- 表单新元素
- 表单新属性
- 表单验证
- 自动验证属性
- 有效性验证
- 取消验证
- 自定义错误信息
表单的新输入类型
- email：邮箱类型；
- 作用：判断当前字符串中是否包含 @ 符号；
- 如果输入内容不不是 email 地址，则不允许提交，并提示错误信息。
- search： 搜索类型
- 注意：chrome下输入文字后，会多出一个关闭的X；
- 如图所示：
- url ：网址类型
- 作用：判断当前字符串中是否包含 http://；
- number：数字类型
- tel：电话号码类型
- 注意：只在移动端浏览器有效；
- range：范围类型
- 作用：适用于应该包含某个范围内数值的输入字段；
- color：颜色类型
- color类型会提供出一个颜色选择器，此时想要获取选择的不同颜色，可以通过onchange获得；
//颜色选择三色器练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义调色器</title> <style> #show{ width: 300px; height: 300px; border: 1px solid; } </style></head><body><div id="show"></div>红色：<input type="range" onchange="coloMove()" id="red" min="0" max="255" step="1" value="255"><br/>绿色：<input type="range" onchange="coloMove()" id="green" min="0" max="255" step="1" value="255"><br/>蓝色：<input type="range" onchange="coloMove()" id="blue" min="0" max="255" step="1" value="255"><br/></body><script>// 每次将颜色有变动或者更改的时候，都将变化后的值传递给value上. function coloMove() { var red = document.getElementById('red').value; var green = document.getElementById('green').value; var blue = document.getElementById('blue').value; var show = document.getElementById('show'); show.style.backgroundColor = "rgb("+red+","+green+","+blue+")"; }</script></html>- date：日期类型
- 作用：按照 ISO 8601 编码的日期（包括年，月，日）；
- month：月份类型
- 作用：由 ISO 8601 编码的年和月组成的日期；
- week：星期类型
- 作用：由 ISO 8601 编码的年和星期数组成的日期；
表单新元素
- datalist：元素规定输入域的选项列表；
- input标签定义选项列表，与input标签配合使用该元素，来定义input可能的值；
<input list="browsers"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist>样式如图：
progress：标签表示进度条，用于显示一个任务的完成进度。标签定义运行中的任务进度（进程）；
- 属性：
- max规定需要完成的值；
- value规定进程的当前值；
- 属性：
<progress id="progress" max="100" value="0"></progress><script>var progress = document.getElementById("progress");var max = progress.max;var t = setInterval(function(){var v = progress.value;if(v == max){clearInterval(t);}else{v++;progress.value = v;}},100);</script>- meter：标签定义度量衡。仅用于已知最大和最小值的度量；
- 属性
- high：number 规定被界定为高的值的范围；
- low：number 规定被界定为低的值的范围
- max：number 规定范围的最大值
- min：number 规定范围的最小值；
- value：number 必需。规定度量的当前值；
- 属性
- output：标签定义不同类型的输出，比如脚本的输出；
- oninput 事件在用户输入时触发。
- 该事件在 input或 textarea元素的值发生改变时触发。
- 提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 keygen 和 select元素；
表单新属性
- placeholder属性：属性提供一种提示，描述输入域所期待的值。
- autofocus属性：autofocus 属性规定在页面加载时，域自动地获得焦点。
- multiple属性：属性规定 input 元素中可选择多个值。
表单验证
自动验证属性
- required 属性规定必须在提交之前填写输入域（不能为空）；
- 可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。
- pattern 属性的值与指定的正则表达式进行匹配（一般用于验证特定格式）；
- 对input元素使用该属性，并且将属性值设置为某个格式的正则表达式，在提交时会检查共内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式
- min 、 max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）；
- min 、 max 和 step 属性适用于以下类型的 input标签： date pickers 、 number 以及 range 。
- min属性与max属性，两个属性是数值类型或日期类型的input元素专用属性；
- step属性，该属性控制input元素中的值增加或减少时的步长。
- maxlength 属性用于设定允许输入的最大字符个数；
- maxlength 属性应该叫做限制属性，就是在输入到达限制后不允许再输入；
有效性验证
- ValidityState 代表了一个元素可以处于的与约束验证相关的有效性状态。
- valid：其他的约束验证条件都不为 true；
- valueMissing：该元素有 required 属性，但却没有值；
- typeMismatch：该元素的值不符合元素类型所要求的格式(当 type 是 email 或
者 url 时)； - patternMismatch ：该元素的值与指定的 pattern 属性不匹配；
- stepMismatch：该元素的值不符合由 step 属性指定的规则；
- rangeUnderflow ： 该元素的值小于指定的 min 属性；
- tooLong：该元素的值的长度超过了HTMLInputElement 或者HTMLTextAreaElement 对象指定的 maxlength 属性中的值；
- rangeOverflow：该元素的值大于指定的 max 属性；
- customError：该元素的自定义有效性消息已经通过调用元素的 setCustomValidity() 方法设置成为一个非空字符串；
//一个表单验证的练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ text-align: center; } #inner{ margin: 10px auto; width: 800px; height: 400px; border: 1px solid red; } #inner input{ line-height: 30px; margin: 10px auto; width: 300px; } #inner .text{ display: inline-block; text-align: right; width: 150px; } #inner .btn{ width: 600px; height: 50px; margin-left: 100px; background-color: orange; border-radius: 20px; } #inner .notice{ display: inline-block; width: 300px; line-height: 30px; text-align: center; color: white; height: 30px; background-color: #777777; border: 1px solid; border-radius: 10px; } #inner .err{ display: inline-block; width: 300px; line-height: 30px; text-align: center; color: white; height: 30px; background-color: red; border: 1px solid; border-radius: 10px; } #inner .suc{ display: inline-block; width: 300px; line-height: 30px; text-align: center; color: white; height: 30px; background-color: lightcoral; border: 1px solid; border-radius: 10px; } .hide{ display: none; } .show{ display: inline-block; } </style></head><body><div id="wrap"> <h1 id="title1">用户注册页面</h1> <form id="inner" action="#"> <!--label作用是让在 label 元素内点击文本，就会触发此控件。--> <label class="text" for="username">用户名：</label> <!--autofocus是当页面一加载时就呈现聚焦样式--> <input type="text" id="username" autofocus placeholder="请输入用户名" required pattern="^[0-9]{6,12}$"> <!--required 属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。 pattern 属性规定用于验证输入字段的模式。--> <label for="username" class="hide" id="usernameTip"></label><br/> <label class="text" for="password">密码：</label> <input type="password" id="password" placeholder="请输入密码" required pattern="^[0-9]{6,12}$"> <label for="password" class="hide" id="passwordTip">请输入6至12位的数字.</label><br/> <label class="text" for="email">电子邮件：</label> <input type="email" id="email" placeholder="请输入电子邮件" required> <label for="email" class="hide" id="emailTip">请输入你的电子邮件地址.</label><br/> <label class="text" for="blog">个人主页：</label> <input type="url" id="blog" placeholder="请输入个人主页地址" > <label for="blog" class="hide" id="blogTip">请输入你的个人主页(该项可忽略).</label><br/> <label class="text" for="age">年龄：</label> <input type="number" id="age" placeholder="请输入你的年龄" required min="18" max="50" step="1"> <label for="username" class="hide" id="ageTip">请输入你的年龄.</label><br/> <label class="text" for="birth">出生日期：</label> <input type="date" id="birth" placeholder="请输入出生日期"> <label for="username" class="hide" id="birthTip">请选择你的出生日期.</label><br/> <button type="submit" value="注册" class="btn">注册</button> </form></div><script> var username = document.getElementById('username'); var usernameTip = document.getElementById('usernameTip'); username.onfocus = function () { usernameTip.className = 'notice show'; usernameTip.innerText= '请输入8至16位的英文或数字.'; } username.onblur = function () { if(username.validity.valid){// 用户名验证通过的时候，也是默认的情况 usernameTip.className = 'suc show'; usernameTip.innerText = '用户名正确'; }else if(username.validity.valueMissing){// 验证填写为空的时候 usernameTip.className = 'err show'; usernameTip.innerText = '用户名不能为空'; }else if(username.validity.patternMismatch){// 用户名输入不符合要求的时候 usernameTip.className = 'err show'; usernameTip.innerText = '用户名输入有误'; } } var password = document.getElementById('password'); var passwordTip = document.getElementById('passwordTip'); password.onfocus = function () { passwordTip.className = 'notice show'; passwordTip.innerText= '请输入8至16位的英文或数字.'; } password.onblur = function () { if(password.validity.valid){ passwordTip.className = 'suc show'; passwordTip.innerText = '密码正确'; }else if(password.validity.valueMissing){ passwordTip.className = 'err show'; passwordTip.innerText = '密码不能为空'; }else if(password.validity.patternMismatch){ passwordTip.className = 'err show'; passwordTip.firstChild.nodeValue = '密码输入有误'; } } var email = document.getElementById('email'); var emailTip = document.getElementById('emailTip'); email.onfocus = function () { emailTip.className = 'notice show'; emailTip.innerText= '请输入8至16位的英文或数字.'; } email.onblur = function () { if(email.validity.valid){ emailTip.className = 'suc show'; emailTip.innerText = '邮箱正确'; }else if(email.validity.valueMissing){ emailTip.className = 'err show'; emailTip.innerText = '邮箱不能为空'; }else if(email.validity.typeMismatch){// 控件值与预期类型不匹配 emailTip.className = 'err show'; emailTip.firstChild.nodeValue = '邮箱格式输入有误'; } } var blog = document.getElementById('blog'); var blogTip = document.getElementById('blogTip'); blog.onfocus = function () { blogTip.className = 'notice show'; blogTip.innerText= '请输入个人主页'; } blog.onblur = function () { if(blog.validity.valid){ blogTip.className = 'suc show'; blogTip.innerText = '个人网页正确'; }else if(blog.validity.typeMismatch){// 控件值与预期类型不匹配 blogTip.className = 'err show'; blogTip.firstChild.nodeValue = '个人网页地址输入有误'; } } var age = document.getElementById('age'); var ageTip = document.getElementById('ageTip'); age.onfocus = function () { ageTip.className = 'notice show'; ageTip.innerText= '请输入8至16位的英文或数字.'; } age.onblur = function () { if(age.validity.valid){ ageTip.className = 'suc show'; ageTip.innerText = '邮箱正确'; }else if(age.validity.valueMissing){ ageTip.className = 'err show'; ageTip.innerText = '邮箱不能为空'; }else if(age.validity.rangeUnderflow){// 控件值与预期类型不匹配 ageTip.className = 'err show'; ageTip.firstChild.nodeValue = '年龄太小了'; }else if(age.validity.rangeOverflow){// 控件值与预期类型不匹配 ageTip.className = 'err show'; ageTip.firstChild.nodeValue = '年龄太大了'; } } var birth = document.getElementById('birth'); var birthTip = document.getElementById('birthTip'); birth.onfocus = function () { birthTip.className = 'notice show'; birthTip.innerText= '请选择你的出生日期'; } birth.onblur = function () { birthTip.className = 'hide'; }</script></body></html>取消验证
- JavaScript中可以使用novalidate获取，若存在则是true，反之则是false。
- 如果提交按钮有多个，为了指定点击某一个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。也可用JavaScript添加禁用验证的属性。
<form action="#"> <input id="text" required="" type="text"> <input value="跳过验证，直接提交" formnovalidate="" type="submit"></form><form action="#" novalidate=""> <input id="text" required="" type="text"> <input value="直接提交" type="submit"></form>自定义错误信息
- setCustomValidity()方法来自定义错误信息
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>自定义错误信息示例</title> <script type="text/javascript"> var check = function() { var passwd1 = document.forms['testForm'].passwd1; var passwd2 = document.forms['testForm'].passwd2; if(passwd1.value != passwd2.value) { passwd2.setCustomValidity("密码不一致！"); return false; } else { passwd2.setCustomValidity(""); } var email = document.forms['testForm'].email1; if(!email1.checkValidity()) { email1.setCustomValidity("请输入正确的E-mail地址！"); return false; } return true; } </script> </head> <body> <form id="testForm" name="testForm" onsubmit="return check();"> <label for="pass1">密码:</label><input type="password" name="passwd1"/><br/> <label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/> <label for="email">E-mail:</label><input type="email" name="email1"/><br/> <button type="submit">提交</button> </form> </body> </html> 阅读全文
0 0
- HTML5表单元素的新特性
- HTML5的表单新特性
- HTML5的表单新特性
- HTML5新的表单元素
- html5表单新特性
- HTML5表单新特性
- html5表单新特性
- HTML5的一些表单新特性
- html5 css3表单新特性
- HTML5表单新特性探究
- HTML5-input元素新特性
- form表单的属性及HTML5新特性列举
- 体验html5新添加的一些表单元素
- HTML5新特性-元素的classList属性与应用
- HTML5新特性-元素的classList属性与应用
- html5的新特性
- html5的新特性
- HTML5的新特性
- 25. index
- LeetCode之Valid Parentheses
- JDK和JRE的区别
- 如何快速转载CSDN中的博客
- Java菜鸟面试突破系列之java虚拟机
- HTML5表单元素的新特性
- arm汇编如何编译 | 为什么学古董语言？
- 加密gogogo
- Linux系统selinux的初级管理
- OpenJudge百炼-1833-排列-C语言-模拟
- Redhat 6.5 x64升级SSH到OpenSSH_7.5p1
- sh和bash的区别
- C++笔试题 String类的实现 详细
- [leetcode] 78. Subsets
