HTML5表单元素的新特性

编程入门行业动态更新时间:2024-10-25 18:33:50

HTML5<a href=https://www.elefans.com/category/jswz/34/1771263.html style= 表单元素的新特性"/>

HTML5表单元素的新特性

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>

更多推荐

HTML5表单元素的新特性

本文发布于:2024-02-17 13:40:16，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1694216.html